/* ============================================== CSS VARIABLES ============================================== */ :root { --bg: #fdf6ee; --text: #2c1f14; --accent: #b07d4e; --accent-light: #e8d5c0; --text-muted: #7a6150; --card-bg: #f7ede0; --nav-h: 68px; --serif: 'Playfair Display', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --radius: 12px; --shadow: 0 4px 20px rgba(44,31,20,.08); --shadow-lg: 0 8px 32px rgba(44,31,20,.15); --ht-brand-accent: #c9a96e; --ht-brand-glow: rgba(201,169,110,0.35); } /* ============================================== DARK MODE VARIABLES ============================================== */ :root.dark { --bg: #1a1410; --text: #f0ebe3; --accent: #b07d4e; --accent-light: #3d2e1e; --text-muted: #9c9488; --card-bg: #242018; --ht-brand-glow: rgba(201,169,110,0.2); } /* ============================================== RESET & BASE ============================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.7; overflow-x: hidden; animation: pageIn .35s ease both; transition: background-color .3s ease, color .3s ease; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } @keyframes pageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ============================================== HABIBITAKES PAGE PALETTE — sky blue, fully independent Light: body.ht-page | Dark: body.ht-page.dark Dark class is toggled on for ht-page (not ). ============================================== */ /* ── Light mode ──────────────────────────────── */ body.ht-page { --ht-bg: #f0f6fc; --ht-surface: #ffffff; --ht-text: #0d1b2a; --ht-text-muted: #4a6380; --ht-accent: #3a8fd1; --ht-accent-hover: #2a7abf; --ht-accent-green: #4caf7d; --ht-border: rgba(58,143,209,0.15); --ht-nav-bg: rgba(240,246,252,0.92); --ht-glow: rgba(58,143,209,0.3); --bg: #f0f6fc; --text: #0d1b2a; --text-muted: #4a6380; --accent: #3a8fd1; --accent-light: rgba(58,143,209,0.12); --card-bg: #ffffff; --shadow: 0 4px 20px rgba(13,27,42,0.08); --shadow-lg: 0 8px 32px rgba(13,27,42,0.16); background-color: #f0f6fc !important; color: #0d1b2a !important; animation: htFadeIn 0.35s ease; } @keyframes htFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Dark mode ───────────────────────────────── */ body.ht-page.dark { --ht-bg: #050d14; --ht-surface: #0d1b2a; --ht-text: #e8f1f8; --ht-text-muted: #6a8fa8; --ht-accent: #3a8fd1; --ht-accent-hover: #5aaee8; --ht-accent-green: #4caf7d; --ht-border: rgba(58,143,209,0.12); --ht-nav-bg: rgba(5,13,20,0.92); --ht-glow: rgba(58,143,209,0.2); --bg: #050d14; --text: #e8f1f8; --text-muted: #6a8fa8; --accent: #3a8fd1; --accent-light: rgba(58,143,209,0.1); --card-bg: #0d1b2a; background-color: #050d14 !important; color: #e8f1f8 !important; } /* ── Section backgrounds ─────────────────────── */ body.ht-page #about, body.ht-page #resume { background-color: #f0f6fc !important; } body.ht-page #links, body.ht-page #contact { background-color: #ffffff !important; } body.ht-page.dark #about, body.ht-page.dark #resume { background-color: #050d14 !important; } body.ht-page.dark #links, body.ht-page.dark #contact { background-color: #0d1b2a !important; } /* ── Card surfaces ───────────────────────────── */ body.ht-page .stat-card, body.ht-page .tl-card, body.ht-page .edu-card { background-color: #ffffff !important; border-color: rgba(58,143,209,0.18) !important; } body.ht-page .link-card { background-color: #f0f6fc !important; } body.ht-page .contact-form { background-color: #f0f6fc !important; border-color: rgba(58,143,209,0.15) !important; } body.ht-page.dark .stat-card, body.ht-page.dark .tl-card, body.ht-page.dark .edu-card { background-color: #0d1b2a !important; border-color: rgba(58,143,209,0.15) !important; } body.ht-page.dark .link-card { background-color: #050d14 !important; border-color: rgba(58,143,209,0.12) !important; } body.ht-page.dark .contact-form { background-color: #050d14 !important; border-color: rgba(58,143,209,0.12) !important; } /* ── Form inputs ─────────────────────────────── */ body.ht-page .form-row input, body.ht-page .form-row textarea { background-color: #ffffff !important; border-color: rgba(58,143,209,0.25) !important; color: #0d1b2a !important; } body.ht-page.dark .form-row input, body.ht-page.dark .form-row textarea { background-color: #0d1b2a !important; border-color: rgba(58,143,209,0.2) !important; color: #e8f1f8 !important; } /* ── Submit button ───────────────────────────── */ body.ht-page .submit-btn { background: #3a8fd1 !important; } body.ht-page .submit-btn:hover { background: #2a7abf !important; box-shadow: 0 6px 22px rgba(58,143,209,0.35) !important; } /* ── Nav bar — always show background, single unified bar ── */ body.ht-page #navbar { background: rgba(240,246,252,0.92) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(58,143,209,0.15) !important; box-shadow: none !important; } body.ht-page.dark #navbar { background: rgba(5,13,20,0.92) !important; border-bottom: 1px solid rgba(58,143,209,0.12) !important; } body.ht-page #navbar.scrolled { background: rgba(240,246,252,0.97) !important; } body.ht-page.dark #navbar.scrolled { background: rgba(5,13,20,0.97) !important; } /* Nav links — transparent on desktop; no separate box */ body.ht-page .nav-links { background: transparent !important; box-shadow: none !important; } body.ht-page .nav-links a { color: #4a6380 !important; } body.ht-page .nav-links a:hover, body.ht-page .nav-links a.active { color: #3a8fd1 !important; } body.ht-page .nav-links a::after { background: #3a8fd1 !important; } body.ht-page.dark .nav-links a { color: #6a8fa8 !important; } body.ht-page.dark .nav-links a:hover, body.ht-page.dark .nav-links a.active { color: #5aaee8 !important; } /* Nav toggle (hamburger) */ body.ht-page .nav-toggle span { background: #0d1b2a !important; } body.ht-page.dark .nav-toggle span { background: #e8f1f8 !important; } /* ── Theme toggle (sun/moon on ht-page) ──────── */ body.ht-page .theme-toggle { color: #4a6380 !important; } body.ht-page .theme-toggle:hover { color: #3a8fd1 !important; } body.ht-page.dark .theme-toggle { color: #6a8fa8 !important; } body.ht-page.dark .theme-toggle:hover { color: #5aaee8 !important; } /* ── Bryan Habibi switcher button ────────────── */ body.ht-page .switcher-btn:not(.switcher-ht) { border: 1px solid rgba(58,143,209,0.25) !important; border-radius: 8px !important; color: #4a6380 !important; background: transparent !important; font-weight: 500 !important; } body.ht-page .switcher-btn:not(.switcher-ht):hover { border-color: #3a8fd1 !important; color: #3a8fd1 !important; } body.ht-page.dark .switcher-btn:not(.switcher-ht) { border-color: rgba(58,143,209,0.2) !important; color: #6a8fa8 !important; } body.ht-page.dark .switcher-btn:not(.switcher-ht):hover { border-color: #5aaee8 !important; color: #5aaee8 !important; } /* ── HabibiTakes image button glow (active on this page) ── */ body.ht-page .switcher-ht.active { box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 0 16px 4px rgba(255,255,255,0.25) !important; } /* ── Footer ──────────────────────────────────── */ body.ht-page footer { background: #0d1b2a !important; color: rgba(232,241,248,0.55) !important; } body.ht-page.dark footer { background: #020810 !important; color: rgba(232,241,248,0.4) !important; } /* ── Link cards — platform brand hover glows ─── */ body.ht-page .link-card { position: relative; overflow: hidden; border-color: rgba(58,143,209,0.15) !important; padding: 1.5rem 2rem 1.5rem 2.4rem !important; min-height: 90px; transition: all .25s ease; } body.ht-page .link-card > * { position: relative; z-index: 1; } body.ht-page.dark .link-card { border-color: rgba(58,143,209,0.12) !important; } body.ht-page .link-card:hover { transform: translateY(-3px); box-shadow: none !important; } /* inset ring — safe with overflow:hidden */ body.ht-page .link-card.lc-ebay:hover { border-color: #e53238 !important; box-shadow: inset 0 0 0 1px #e53238 !important; } body.ht-page .link-card.lc-instagram:hover { border-color: #c13584 !important; box-shadow: inset 0 0 0 1px #c13584 !important; } body.ht-page .link-card.lc-facebook:hover { border-color: #1877f2 !important; box-shadow: inset 0 0 0 1px #1877f2 !important; } body.ht-page .link-card.lc-offerup:hover { border-color: #40b785 !important; box-shadow: inset 0 0 0 1px #40b785 !important; } /* ── Candy cane accent bars ─── */ body.ht-page .link-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 0; } /* eBay: red · blue · yellow · green */ body.ht-page .link-card.lc-ebay::before { background: repeating-linear-gradient(-45deg, #e53238 0px, #e53238 7px, #0064d2 7px, #0064d2 14px, #f5af02 14px, #f5af02 21px, #86b817 21px, #86b817 28px); background-size: 40px 40px; animation: ccSlide40 2s linear infinite; } /* Instagram: orange · pink · purple */ body.ht-page .link-card.lc-instagram::before { background: repeating-linear-gradient(-45deg, #f58529 0px, #f58529 8px, #dd2a7b 8px, #dd2a7b 16px, #8134af 16px, #8134af 24px); background-size: 34px 34px; animation: ccSlide34 2s linear infinite; } /* Facebook: blue · mid-blue · green */ body.ht-page .link-card.lc-facebook::before { background: repeating-linear-gradient(-45deg, #1877f2 0px, #1877f2 8px, #166fe5 8px, #166fe5 16px, #42b72a 16px, #42b72a 24px); background-size: 34px 34px; animation: ccSlide34 2s linear infinite; } /* OfferUp: mint · teal · forest */ body.ht-page .link-card.lc-offerup::before { background: repeating-linear-gradient(-45deg, #40b785 0px, #40b785 8px, #23c4c4 8px, #23c4c4 16px, #2d9e70 16px, #2d9e70 24px); background-size: 34px 34px; animation: ccSlide34 2s linear infinite; } @keyframes ccSlide34 { to { background-position: 34px 34px; } } @keyframes ccSlide40 { to { background-position: 40px 40px; } } /* ============================================== SCROLL FADE-IN ============================================== */ .fade-in { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; } .fade-in.d1 { transition-delay: .1s; } .fade-in.d2 { transition-delay: .2s; } .fade-in.d3 { transition-delay: .3s; } .fade-in.d4 { transition-delay: .4s; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ============================================== LAYOUT UTILITIES ============================================== */ section { padding: 104px 0; } .container { max-width: 1100px; margin: 0 auto; padding: 0 28px; } .section-label { display: flex; align-items: center; gap: 10px; font-size: .73rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .section-label::before { content: ''; width: 24px; height: 1px; background: var(--accent); flex-shrink: 0; } .section-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.15; margin-bottom: 52px; } .section-title em { font-style: italic; color: var(--accent); } /* ============================================== NAVIGATION ============================================== */ #navbar { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 1000; transition: background .3s, backdrop-filter .3s, box-shadow .3s; } #navbar.scrolled { background: rgba(253,246,238,.87); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 24px rgba(44,31,20,.09); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 28px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; transition: color .2s; } .nav-logo:hover { color: var(--accent); } /* Switcher pills */ .nav-switcher { display: flex; gap: 8px; align-items: center; } .switcher-btn { font-family: var(--sans); font-size: 13px; font-weight: 600; height: 32px; padding: 0 12px; border-radius: 50px; border: 1.5px solid rgba(176,125,78,.35); color: var(--text-muted); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; line-height: 1; } .switcher-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .switcher-btn:not(.active):hover { border-color: var(--accent); color: var(--accent); } /* HabibiTakes image button */ .switcher-ht { padding: 2px; overflow: hidden; height: 32px; width: auto; border-radius: 8px; border: 2px solid transparent; background: none; line-height: 0; flex-shrink: 0; display: inline-flex; align-items: center; } .ht-btn-img { height: 28px; width: auto; display: block; object-fit: cover; object-position: 25% center; border-radius: 6px; transition: transform .2s ease; } .switcher-ht:hover .ht-btn-img { transform: scale(1.05); } .switcher-ht.active { box-shadow: 0 0 0 2px var(--ht-brand-accent), 0 0 12px 2px var(--ht-brand-glow); } @keyframes htGlowPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 1.5px var(--ht-brand-accent), 0 0 10px 2px var(--ht-brand-glow); } } .switcher-ht:not(.active):hover { animation: htGlowPulse 1.2s ease infinite; } /* Desktop nav links */ .nav-right { display: flex; align-items: center; gap: 16px; } .nav-links { display: flex; list-style: none; gap: 36px; } .nav-links a { font-size: .88rem; font-weight: 500; position: relative; padding-bottom: 3px; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent); border-radius: 2px; transition: width .3s cubic-bezier(.4,0,.2,1); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 6px 4px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: all .3s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================== THEME TOGGLE — sun / moon icons (both pages) ============================================== */ .theme-toggle { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; background: none; border: none; padding: 0; color: var(--text-muted); transition: color .2s ease; } .theme-toggle:hover { color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; position: absolute; transition: opacity .25s ease, transform .25s ease; } .icon-sun { opacity: 0; transform: rotate(90deg) scale(.8); } .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } .dark .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } .dark .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.8); } /* ============================================== HERO (index.html) ============================================== */ #hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 0; } #hero-bg { position: absolute; inset: -30%; background: radial-gradient(ellipse 80% 60% at 18% 60%, rgba(176,125,78,.18) 0%, transparent 58%), radial-gradient(ellipse 55% 50% at 82% 28%, rgba(176,125,78,.12) 0%, transparent 52%), radial-gradient(ellipse 45% 45% at 55% 78%, rgba(232,213,192,.35) 0%, transparent 50%); will-change: transform; } .hero-content { position: relative; z-index: 1; text-align: center; padding: 0 28px; max-width: 820px; } .hero-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; opacity: 0; animation: heroUp .8s ease .15s forwards; } .hero-name { font-family: var(--serif); font-size: clamp(3.6rem, 11vw, 7.5rem); font-weight: 700; line-height: 1.02; margin-bottom: 22px; opacity: 0; animation: heroUp .9s ease .35s forwards; } .hero-tagline { font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 300; color: var(--text-muted); margin-bottom: 0; opacity: 0; animation: heroUp .9s ease .55s forwards; } .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: heroUp .9s ease .75s forwards; } .hero-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 50px; font-size: .86rem; font-weight: 500; transition: transform .25s ease, box-shadow .25s ease, background .2s, border-color .2s, color .2s; border: 1.5px solid transparent; } .hero-btn svg { width: 17px; height: 17px; flex-shrink: 0; } .hero-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .hero-btn.primary:hover { background: #9a6d3e; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(176,125,78,.38); } .hero-btn.outline { border-color: rgba(44,31,20,.2); color: var(--text); } .hero-btn.outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .scroll-hint { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: fadeIn 1s ease 1.5s forwards; } .scroll-hint span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--accent), transparent); animation: pulse 2s ease-in-out infinite; } @keyframes heroUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: .65; } } @keyframes pulse { 0%,100% { opacity: 1; transform: scaleY(1); } 50% { opacity: .4; transform: scaleY(.55); } } /* ============================================== HABIBITAKES HERO ============================================== */ #ht-hero { height: 70vh; min-height: 480px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ht-hero-img { position: absolute; inset: -10%; background: url('assets/habibitakes-hero.jpg?v=2') 25% center / cover no-repeat; animation: kenBurns 20s ease-in-out infinite alternate; will-change: transform; } @keyframes kenBurns { from { transform: scale(1) translateX(0); } to { transform: scale(1.06) translateX(1%); } } .ht-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.15) 58%, rgba(0,0,0,0.72) 82%, rgba(0,0,0,0.92) 100% ); } /* Location badge — bottom-left */ .ht-hero-badge { position: absolute; bottom: 2.6rem; left: 2.6rem; z-index: 2; display: flex; align-items: center; gap: 0.55rem; opacity: 0; animation: htBadgeFade 1s ease 0.7s forwards; } .ht-hero-loc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #3a8fd1; animation: locPulse 2.4s ease-in-out infinite; } @keyframes locPulse { 0% { box-shadow: 0 0 0 0 rgba(58,143,209,0.75); } 65% { box-shadow: 0 0 0 8px rgba(58,143,209,0); } 100% { box-shadow: 0 0 0 0 rgba(58,143,209,0); } } .ht-hero-loc-text { font-family: 'Inter', sans-serif; font-size: 0.67rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.62); } /* Scroll chevron — bottom-center */ .ht-scroll-hint { position: absolute; bottom: 1.5rem; left: 50%; z-index: 2; transform: translateX(-50%); color: rgba(255,255,255,0.32); opacity: 0; animation: htBadgeFade 1s ease 1.1s forwards, htScrollBob 2s ease-in-out 2.2s infinite; } .ht-scroll-hint svg { width: 22px; height: 22px; display: block; } @keyframes htBadgeFade { to { opacity: 1; } } @keyframes htScrollBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* ============================================== ABOUT ============================================== */ #about { background: var(--bg); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .photo-wrap { display: flex; justify-content: center; } .photo-circle { width: 290px; height: 290px; border-radius: 50%; background: var(--accent-light); border: 4px solid var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; box-shadow: 0 14px 44px rgba(176,125,78,.22); position: relative; } .photo-circle svg { width: 90px; height: 90px; color: var(--accent); opacity: .65; } .photo-label { font-size: .7rem; font-weight: 600; letter-spacing: .05em; color: var(--accent); background: rgba(253,246,238,.92); padding: 5px 12px; border-radius: 20px; } .about-bio { font-size: 1.01rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 40px; } .about-bio strong { color: var(--text); } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .stat-card { background: var(--card-bg); border: 1px solid var(--accent-light); border-radius: var(--radius); padding: 20px 14px; text-align: center; transition: transform .25s, box-shadow .25s, background-color .3s ease, border-color .3s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .stat-num { font-family: var(--serif); font-size: 2.1rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 6px; } .stat-lbl { font-size: .76rem; font-weight: 500; color: var(--text-muted); letter-spacing: .04em; } /* ============================================== HABIBITAKES CIRCULAR SLIDESHOW ============================================== */ .ht-circle-slideshow { width: 370px; height: 370px; border-radius: 50%; border: 3px solid var(--ht-accent, #3a8fd1); box-shadow: 0 0 24px rgba(58,143,209,0.3); position: relative; overflow: hidden; cursor: pointer; flex-shrink: 0; background: rgba(58,143,209,0.06); } .ht-cs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; } .ht-cs-slide.active { opacity: 1; } .ht-cs-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Lightbox */ .ht-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 9000; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .ht-lightbox.open { opacity: 1; pointer-events: auto; } .ht-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; display: block; } .ht-lightbox-close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; background: none; border: none; opacity: 0.8; transition: opacity 0.2s; padding: 4px 8px; } .ht-lightbox-close:hover { opacity: 1; } /* ============================================== LINKS HUB ============================================== */ #links { background: var(--card-bg); } .links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ht-links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .link-card { background: var(--bg); border: 1.5px solid var(--accent-light); border-radius: var(--radius); padding: 24px 20px; display: flex; align-items: center; gap: 16px; cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s, background-color .3s ease; } .link-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .lc-icon { width: 48px; height: 48px; border-radius: 11px; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .25s, color .25s; } .link-card:hover .lc-icon { background: var(--accent); color: #fff; } .lc-icon svg { width: 22px; height: 22px; } .lc-info { flex: 1; min-width: 0; } .lc-name { font-weight: 600; font-size: .93rem; margin-bottom: 3px; } .lc-url { font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lc-arrow { color: var(--text-muted); flex-shrink: 0; transition: transform .25s, color .25s; } .link-card:hover .lc-arrow { transform: translateX(4px); color: var(--accent); } .lc-arrow svg { width: 17px; height: 17px; } /* ht-page: larger link cards */ body.ht-page .link-card { padding: 1.5rem 2rem; min-height: 90px; } /* ============================================== RESUME ============================================== */ #resume { background: var(--bg); } .resume-layout { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; } .tl-heading { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin-bottom: 30px; } .timeline { position: relative; } .tl-rail { position: absolute; left: 11px; top: 52px; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--accent) 60%, transparent); } .tl-item { position: relative; padding-left: 46px; margin-bottom: 36px; } .tl-dot { position: absolute; left: 0; top: 5px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; } .tl-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .tl-card { background: var(--card-bg); border: 1px solid var(--accent-light); border-radius: var(--radius); padding: 20px 22px; transition: box-shadow .25s, background-color .3s ease, border-color .3s ease; } .tl-card:hover { box-shadow: var(--shadow-lg); } .tl-date { font-size: .73rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; } .tl-role { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; margin-bottom: 3px; } .tl-company { font-size: .86rem; color: var(--text-muted); font-weight: 500; margin-bottom: 10px; } .tl-desc { font-size: .9rem; color: var(--text-muted); line-height: 1.72; } .resume-sidebar { position: sticky; top: calc(var(--nav-h) + 28px); } .sidebar-block { margin-bottom: 44px; } .sidebar-block .tl-heading { margin-bottom: 18px; } .skills-tags { display: flex; flex-wrap: wrap; gap: 9px; } .skill-tag { background: var(--accent-light); color: var(--accent); font-size: .8rem; font-weight: 500; padding: 6px 13px; border-radius: 50px; border: 1px solid rgba(176,125,78,.25); transition: background .2s, color .2s; cursor: default; } .skill-tag:hover { background: var(--accent); color: #fff; } .edu-card { background: var(--card-bg); border: 1px solid var(--accent-light); border-radius: var(--radius); padding: 18px 20px; transition: background-color .3s ease, border-color .3s ease; } /* ============================================== TIMELINE BULLETS & COMPETENCIES ============================================== */ .tl-bullets { list-style: none; padding: 0; margin: 0; } .tl-bullets li { font-size: .9rem; color: var(--text-muted); line-height: 1.65; padding-left: 16px; position: relative; margin-bottom: 7px; } .tl-bullets li:last-child { margin-bottom: 0; } .tl-bullets li::before { content: '–'; position: absolute; left: 0; color: var(--accent); font-weight: 600; } .comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 28px; margin-top: 6px; } .comp-pair { font-size: .875rem; color: var(--text-muted); line-height: 1.5; } /* ============================================== CONTACT ============================================== */ #contact { background: var(--card-bg); } .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .contact-info p { font-size: 1rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 32px; } .contact-detail { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .9rem; color: var(--text-muted); } .contact-detail svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; } .contact-form { background: var(--bg); border: 1.5px solid var(--accent-light); border-radius: var(--radius); padding: 36px 32px; transition: background-color .3s ease, border-color .3s ease; } .form-row { margin-bottom: 20px; } .form-row label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .form-row input, .form-row textarea { width: 100%; background: var(--bg); border: 1.5px solid var(--accent-light); border-radius: 8px; padding: 12px 15px; font-family: var(--sans); font-size: .94rem; color: var(--text); outline: none; resize: vertical; transition: border-color .2s, box-shadow .2s, background-color .3s ease; } .form-row input::placeholder, .form-row textarea::placeholder { color: #c4ad97; } .form-row input:focus, .form-row textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176,125,78,.13); } .form-row textarea { min-height: 118px; } .submit-btn { width: 100%; padding: 14px 28px; background: var(--accent); color: #fff; font-family: var(--sans); font-size: .94rem; font-weight: 600; border-radius: 8px; letter-spacing: .03em; transition: background .2s, transform .2s, box-shadow .2s; } .submit-btn:hover { background: #9a6d3e; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(176,125,78,.38); } .submit-btn:active { transform: translateY(0); } #form-success { display: none; text-align: center; padding: 16px 0 4px; color: var(--accent); } #form-success svg { width: 44px; height: 44px; display: block; margin: 0 auto 12px; } #form-success p { font-weight: 500; } #form-success small { color: var(--text-muted); font-size: .85rem; } .form-note { margin-top: 12px; font-size: .77rem; color: var(--text-muted); text-align: center; line-height: 1.55; } #form-error { display: none; background: #fdf0ed; border: 1px solid #e8b4a0; border-radius: 8px; padding: 11px 14px; margin-top: 12px; font-size: .875rem; color: #8b3a24; line-height: 1.5; } /* ============================================== DARK MODE — HARD-CODED OVERRIDES (Bryan Habibi) ============================================== */ .dark footer { background: #0f0d0a; color: rgba(240,235,227,.5); } .dark footer a { color: #6b5540; } .dark footer a:hover { color: var(--accent); } .dark #navbar.scrolled { background: rgba(26,20,16,.92); border-bottom: 1px solid rgba(240,235,227,.07); box-shadow: none; } .dark .photo-label { background: rgba(26,20,16,.92); } .dark .form-row input::placeholder, .dark .form-row textarea::placeholder { color: #5e5248; } body.ht-page .form-row input::placeholder, body.ht-page .form-row textarea::placeholder { color: rgba(74,99,128,0.6); } body.ht-page.dark .form-row input::placeholder, body.ht-page.dark .form-row textarea::placeholder { color: rgba(232,241,248,0.35); } .dark #form-error { background: #2e1a14; border-color: #6b3020; color: #e8917a; } /* ============================================== FOOTER ============================================== */ footer { background: var(--text); color: rgba(253,246,238,.6); text-align: center; padding: 36px 28px; font-size: .84rem; } footer a { color: var(--accent-light); } footer a:hover { color: var(--accent); } /* ============================================== RESPONSIVE — TABLET (≤ 900px) ============================================== */ @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 44px; } .photo-wrap { order: -1; } .links-grid { grid-template-columns: repeat(2, 1fr); } .resume-layout { grid-template-columns: 1fr; } .resume-sidebar { position: static; } .contact-layout { grid-template-columns: 1fr; gap: 44px; } } /* ============================================== RESPONSIVE — MOBILE NAV (≤ 768px) ============================================== */ @media (max-width: 768px) { .nav-links { position: fixed; top: var(--nav-h); left: 0; right: 0; background: rgba(253,246,238,.97); backdrop-filter: blur(14px); flex-direction: column; gap: 0; padding: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .3s ease, padding .3s ease; box-shadow: 0 8px 28px rgba(44,31,20,.12); list-style: none; pointer-events: none; } .nav-links.open { max-height: 300px; opacity: 1; padding: 10px 0 18px; pointer-events: auto; } .dark .nav-links { background: rgba(26,20,16,.97); box-shadow: 0 8px 28px rgba(0,0,0,.35); } .nav-links a { display: block; padding: 13px 28px; font-size: .98rem; } .nav-links a::after { display: none; } .nav-toggle { display: flex; } body.ht-page .nav-links { background: rgba(240,246,252,0.97) !important; box-shadow: 0 8px 28px rgba(13,27,42,0.12) !important; } body.ht-page.dark .nav-links { background: rgba(5,13,20,0.97) !important; } } /* ============================================== RESPONSIVE — MOBILE (≤ 600px) ============================================== */ @media (max-width: 600px) { section { padding: 72px 0; } .comp-grid { grid-template-columns: 1fr; } .links-grid { grid-template-columns: 1fr; } .ht-links-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .photo-circle { width: 210px; height: 210px; } .contact-form { padding: 24px 20px; } .hero-btns { flex-direction: column; align-items: center; } .hero-btn { width: 220px; justify-content: center; } #ht-hero { height: 50vh; } .ht-circle-slideshow { width: 260px; height: 260px; } } /* ============================================== ACCESSIBILITY & POLISH ADDITIONS ============================================== */ .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--accent, #b07d4e); color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600; text-decoration: none; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 0; } .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; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent, #b07d4e); outline-offset: 3px; } #scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--accent); z-index: 10000; pointer-events: none; transition: width 0.05s linear; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================== TYPEWRITER CURSOR ============================================== */ .tw-typing::after { content: '|'; animation: twBlink 0.7s step-end infinite; color: var(--accent); margin-left: 1px; } @keyframes twBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============================================== HERO GRAIN TEXTURE ============================================== */ #hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; z-index: 1; } .hero-content { z-index: 2; } /* ============================================== HERO SOCIAL LINKS ============================================== */ .hero-socials { display: flex; gap: 12px; justify-content: center; margin-top: 20px; opacity: 0; animation: heroUp .9s ease .75s forwards; } .hero-social-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border: 1.5px solid var(--accent-light); transition: color .2s, border-color .2s, transform .2s; } .hero-social-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .hero-social-btn svg { width: 24px; height: 24px; }