/* ============================================================ Juan Diego Garita — custom.css ============================================================ Token-driven stylesheet. All colors, spacing, type sizes, and radii come from CSS custom properties declared on :root below. Theming: - Light palette lives on :root - Dark palette overrides live under :root[data-theme="dark"] - index.html flips [data-theme] on via a no-FOUC inline script in and a toggle in js/custom.js. To tweak the palette, edit the tokens in the :root blocks — nothing else should reference raw hex values. Layout: - Mobile-first, single column at < 768px. - .container caps width at 1120px and centers horizontally. ============================================================ */ /* ---------- Design tokens (light) ---------- */ :root { /* Palette */ --bg: #FAFAF7; --bg-elevated: #FFFFFF; --bg-alt: #F2F0EA; --fg: #121417; --fg-muted: #5A6169; --border: #E4E2DA; --accent: #6E56CF; /* violet */ --accent-hover: #5B45B8; --accent-soft: rgba(110, 86, 207, 0.12); --accent-2: #F97316; /* kotlin-adjacent orange */ --shadow-sm: 0 1px 2px rgba(18, 20, 23, 0.04), 0 1px 3px rgba(18, 20, 23, 0.06); --shadow-md: 0 4px 12px rgba(18, 20, 23, 0.08); --shadow-lg: 0 24px 48px -12px rgba(18, 20, 23, 0.18); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fs-4xl: 4rem; /* Spacing scale */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* Layout */ --container: 1120px; --header-h: 64px; /* Motion */ --t-fast: 150ms; --t-med: 250ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Design tokens (dark) ---------- */ :root[data-theme="dark"] { --bg: #0E1116; --bg-elevated: #161A21; --bg-alt: #12151B; --fg: #E8EAED; --fg-muted: #9199A3; --border: #242932; --accent: #9F85FF; --accent-hover: #B8A2FF; --accent-soft: rgba(159, 133, 255, 0.16); --accent-2: #FB923C; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease); } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--accent-hover); } h1, h2, h3, h4 { margin: 0 0 var(--s-4); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } p { margin: 0 0 var(--s-4); } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom: 1px solid transparent; transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--border); } .nav-row { display: flex; align-items: center; gap: var(--s-4); height: var(--header-h); } .brand { display: flex; align-items: center; gap: var(--s-3); color: var(--fg); font-weight: 600; } .brand:hover { color: var(--fg); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; } .brand-name { font-size: var(--fs-sm); } .site-nav { margin-left: auto; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg); cursor: pointer; font-size: var(--fs-md); } .nav-menu { display: none; flex-direction: column; gap: var(--s-2); position: absolute; left: var(--s-5); right: var(--s-5); top: calc(var(--header-h) - 4px); padding: var(--s-4); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); } .nav-menu.is-open { display: flex; } .nav-menu a { display: block; padding: var(--s-3) var(--s-4); color: var(--fg); font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease); } .nav-menu a:hover { background: var(--accent-soft); color: var(--accent); } .nav-menu .nav-cta { background: var(--accent); color: #fff; } .nav-menu .nav-cta:hover { background: var(--accent-hover); color: #fff; } .header-controls { display: flex; align-items: center; gap: var(--s-2); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--s-3); background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .icon-btn .fa { font-size: var(--fs-md); } /* Theme icon visibility: show sun in light mode, moon in dark */ #theme-icon-light { display: none; } :root[data-theme="dark"] #theme-icon-dark { display: none; } :root[data-theme="dark"] #theme-icon-light { display: inline; } /* Desktop nav */ @media (min-width: 768px) { .nav-toggle { display: none; } .nav-menu { display: flex; flex-direction: row; align-items: center; gap: var(--s-2); position: static; padding: 0; background: transparent; border: 0; box-shadow: none; } .brand-name { font-size: var(--fs-base); } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-hover); color: #fff; box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Sections ---------- */ .section { padding: var(--s-7) 0; } @media (min-width: 768px) { .section { padding: var(--s-9) 0; } } .section-alt { background: var(--bg-alt); } .section-heading { font-size: var(--fs-2xl); margin-bottom: var(--s-3); text-align: center; } .section-subheading { color: var(--fg-muted); font-size: var(--fs-md); margin-bottom: var(--s-7); max-width: 60ch; text-align: center; margin-left: auto; margin-right: auto; } .section-body { color: var(--fg-muted); font-size: var(--fs-md); max-width: 60ch; margin-left: auto; margin-right: auto; } /* ---------- Hero ---------- */ .hero { position: relative; padding: var(--s-6) 0 var(--s-7); overflow: hidden; isolation: isolate; } @media (min-width: 768px) { .hero { padding: var(--s-9) 0; } } .hero-inner { position: relative; z-index: 1; max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; } .frnk-hero-logo { display: block; width: clamp(96px, 18vw, 160px); height: auto; margin: 0 auto var(--s-5); border-radius: var(--r-lg); } .hero-eyebrow { display: inline-block; padding: var(--s-1) var(--s-3); margin-bottom: var(--s-5); background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; border-radius: var(--r-pill); } .hero-title { font-size: clamp(2.5rem, 6vw + 1rem, var(--fs-4xl)); margin-bottom: var(--s-5); letter-spacing: -0.03em; } .hero-tagline { font-size: clamp(var(--fs-md), 2vw + 0.6rem, var(--fs-xl)); color: var(--fg); margin-bottom: var(--s-4); max-width: 42ch; font-weight: 500; margin-left: auto; margin-right: auto; } .hero-description { font-size: var(--fs-md); color: var(--fg-muted); max-width: 60ch; margin-bottom: var(--s-7); margin-left: auto; margin-right: auto; } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; } .hero-glow { position: absolute; inset: -40% -20% auto auto; width: 60vw; height: 60vw; max-width: 700px; max-height: 700px; background: radial-gradient(closest-side, var(--accent-soft) 0%, transparent 70%); filter: blur(40px); pointer-events: none; z-index: 0; } /* ---------- About ---------- */ .about-grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: center; } .about-photo img { width: 220px; max-width: 60%; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; object-position: center 10%; background: transparent; border: 0; box-shadow: none; margin: 0 auto; } @media (min-width: 768px) { .about-photo img { margin: 0; } } .about-copy .section-body { text-align: justify; } .highlights { margin-top: var(--s-5); display: grid; gap: var(--s-3); } .highlights li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--fg); } .highlights li .fa { color: var(--accent); margin-top: 0.35em; } @media (min-width: 768px) { .about-grid { grid-template-columns: 280px 1fr; gap: var(--s-8); } .about-photo img { width: 280px; max-width: 100%; } } /* ---------- Timeline ---------- */ .timeline { position: relative; padding-left: var(--s-6); margin: 0; list-style: none; } .timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border); } .timeline-item { position: relative; padding-bottom: var(--s-6); } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: calc(var(--s-6) * -1 + 1px); top: calc(50% - var(--s-6) / 2); transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--bg-alt); } .section:not(.section-alt) .timeline-dot { box-shadow: 0 0 0 4px var(--bg); } .timeline-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); } .timeline-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); } .timeline-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin-bottom: var(--s-2); font-size: var(--fs-xs); color: var(--fg-muted); } .timeline-dates { font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .timeline-company { font-weight: 600; color: var(--fg); } .timeline-role { font-size: var(--fs-lg); margin: 0 0 var(--s-3); } .timeline-bullets { display: grid; gap: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); } .timeline-bullets li { position: relative; padding-left: var(--s-5); } .timeline-bullets li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.6; } /* ---------- Projects ---------- */ .projects-grid { display: grid; gap: var(--s-5); max-width: 720px; margin: 0 auto; } .project-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-6); box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); } .project-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); } .project-title { font-size: var(--fs-xl); margin: 0 0 var(--s-2); } .project-tagline { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-bottom: var(--s-4); } .project-description { color: var(--fg-muted); font-size: var(--fs-md); margin-bottom: var(--s-5); } .project-stores { display: flex; flex-wrap: wrap; gap: var(--s-3); } .store-btn { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--r-pill); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .store-btn:hover { transform: translateY(-1px); background: var(--accent-hover); color: #fff; box-shadow: var(--shadow-md); } .store-btn .fa { font-size: var(--fs-xl); line-height: 1; } .store-btn-icon { width: var(--fs-xl); height: var(--fs-xl); flex-shrink: 0; } .store-btn-labels { display: flex; flex-direction: column; line-height: 1.1; } .store-btn-top { font-size: 0.65rem; opacity: 0.75; } .store-btn-main { font-size: var(--fs-sm); font-weight: 600; } .store-btn.is-disabled { background: var(--bg-alt); color: var(--fg-muted); border-color: var(--border); cursor: not-allowed; pointer-events: none; } /* ---------- Skills ---------- */ .skills-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; } @media (min-width: 640px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .skills-grid { grid-template-columns: repeat(4, 1fr); } } .skill-group-title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: var(--s-4); font-weight: 600; } .chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); } .chip { display: inline-flex; align-items: center; padding: var(--s-2) var(--s-4); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; color: var(--fg); font-family: var(--font-mono); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } /* ---------- Contact ---------- */ .contact-inner { max-width: 720px; margin: 0 auto; } .contact-list { display: grid; gap: var(--s-3); margin-top: var(--s-6); } .contact-link { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg); font-weight: 500; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .contact-link:hover { transform: translateX(4px); border-color: var(--accent); color: var(--accent); } .contact-link .fa { width: 24px; font-size: var(--fs-lg); text-align: center; } /* ---------- Footer ---------- */ .site-footer { padding: var(--s-6) 0; border-top: 1px solid var(--border); color: var(--fg-muted); font-size: var(--fs-xs); } .footer-row { display: flex; justify-content: center; align-items: center; text-align: center; } .footer-row p { margin: 0; } /* ---------- Feature grid (project landing pages) ---------- */ .feature-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-top: var(--s-6); } @media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } } .feature-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); } .feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); } .feature-title { font-size: var(--fs-md); margin: 0 0 var(--s-2); } .feature-body { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0; } .status-card { max-width: 720px; margin: var(--s-6) auto 0; padding: var(--s-5) var(--s-6); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); text-align: center; } .status-card p { color: var(--fg-muted); margin-bottom: var(--s-4); } .status-card a { font-weight: 600; }