/* ============================================================
global.css — Gibby Gutierrez Portfolio 2026
Shared across: index.html, about.html, resume.html,
work/*.html (case study pages)
============================================================ */
/* ── GOOGLE FONTS ─────────────────────────────────────────── */
/* Add to each page :
*/
/* ── COLOR TOKENS ─────────────────────────────────────────── */
:root {
--blackberry: #260F25;
--charcoal: #404040;
--gypsum: #FAFAFA;
--snowball: #FEFEFE;
--dusty: #F4F4F0;
--neon-pink: #FF4ECD;
--rad-blue: #85D3F2;
--aqua: #8FD9D1;
--lime: #A4F22E;
--banana: #FFD84E;
--largo-teal: #007A78;
--grape: #4E2973;
--navy: #2C2E59;
--eggplant: #66457A;
--whoops: #B31111;
}
/* ── RESET ────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background: var(--snowball);
color: var(--blackberry);
-webkit-font-smoothing: antialiased;
}
:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
/* ── PAGE WRAP ────────────────────────────────────────────── */
.page-wrap {
max-width: 1440px;
margin: 0 auto;
background: var(--dusty);
position: relative;
overflow-x: hidden;
}
/* ── NOISE TEXTURE ────────────────────────────────────────── */
/* Apply .noise to any section that needs the feTurbulence overlay.
Children must be position: relative; z-index: 1 (handled by .noise > *) */
.noise {
position: relative;
}
.noise::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.303' numOctaves='3' seed='5993' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size: 100px 100px;
background-repeat: repeat;
mix-blend-mode: multiply;
}
.noise>* {
position: relative;
z-index: 1;
}
/* Intensity modifiers */
.noise-light::before {
opacity: 0.18;
mix-blend-mode: screen;
}
.noise-medium::before {
opacity: 0.3;
mix-blend-mode: multiply;
}
.noise-heavy::before {
opacity: 0.45;
mix-blend-mode: multiply;
}
/* ── SHARED SECTION STRUCTURE ─────────────────────────────── */
.section-inner {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* ── TYPOGRAPHY PRIMITIVES ────────────────────────────────── */
.eyebrow {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 19px;
letter-spacing: 4px;
text-transform: uppercase;
}
.headline-block {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px 0;
}
.headline-block--tall {
padding: 24px 0;
}
.headline {
font-family: 'Outfit', sans-serif;
font-weight: 700;
}
.headline--h1 {
font-size: 72px;
line-height: 91px;
}
.headline--h2 {
font-size: 64px;
line-height: 81px;
}
.headline--h3 {
font-size: 48px;
line-height: 60px;
}
.headline--h4 {
font-size: 32px;
line-height: 40px;
}
.headline--h5 {
font-size: 28px;
line-height: 35px;
}
.headline--h6 {
font-size: 20px;
line-height: 25px;
}
/* ── ACCENT BAR ───────────────────────────────────────────── */
/* The short colored stripe under headlines. Always square corners. */
.accent-bar {
width: 88px;
height: 8px;
border-radius: 0;
flex-shrink: 0;
}
/* ── SUBJECT / STATUS TAGS ────────────────────────────────── */
.tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border-radius: 24px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 12px;
line-height: 15px;
white-space: nowrap;
flex-shrink: 0;
}
/* Named color assignments */
.tag--design-systems {
background: var(--aqua);
color: var(--navy);
}
.tag--enterprise-ux {
background: var(--largo-teal);
color: var(--gypsum);
}
.tag--multi-platform {
background: var(--rad-blue);
color: var(--navy);
}
.tag--conversational-ux {
background: var(--lime);
color: var(--navy);
}
.tag--branding {
background: var(--lime);
color: var(--navy);
}
.tag--design-governance {
background: var(--largo-teal);
color: var(--gypsum);
}
.tag--component-libs {
background: var(--aqua);
color: var(--navy);
}
.tag--healthcare-ux {
background: var(--banana);
color: var(--navy);
}
.tag--accessibility {
background: var(--banana);
color: var(--navy);
}
.tag--mobile-apps {
background: var(--rad-blue);
color: var(--navy);
}
.tag--health-tech {
background: var(--aqua);
color: var(--navy);
}
.tag--interaction {
background: var(--aqua);
color: var(--navy);
}
.tag--platform-pivot {
background: var(--rad-blue);
color: var(--navy);
}
/* Contextual color variants */
.tag--light {
background: rgba(64, 64, 64, 0.1);
border: 1px solid var(--gypsum);
color: var(--gypsum);
}
.tag--eggplant {
background: var(--eggplant);
color: var(--gypsum);
}
.tag--dark {
color: var(--gypsum);
}
/* for inline style bg tags on dark surfaces */
.tag--placeholder {
background: var(--dusty);
color: var(--navy);
}
/* Status tag (small caps, tighter) */
.status-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border-radius: 12px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 12px;
line-height: 13px;
letter-spacing: 2px;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
/* ── BUTTONS ──────────────────────────────────────────────── */
/* Primary pill button */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
border-radius: 24px;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 20px;
text-decoration: none;
cursor: pointer;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
border: none;
white-space: nowrap;
}
.btn-primary {
background: var(--eggplant);
color: var(--gypsum);
}
.btn-primary .btn-arrow {
color: var(--neon-pink);
margin-left: 4px;
}
.btn-primary:hover {
background: var(--aqua);
color: var(--blackberry);
}
.btn-primary:hover .btn-arrow {
color: var(--blackberry);
}
.btn-primary:active {
background: var(--banana);
color: var(--blackberry);
}
.btn-outline {
background: transparent;
color: var(--blackberry);
border: 1px solid var(--blackberry);
}
.btn-outline:hover {
background: var(--aqua);
border-color: var(--aqua);
color: var(--blackberry);
}
.btn-outline:active {
background: var(--banana);
border-color: var(--banana);
}
/* Outline light (for dark backgrounds) */
.btn-outline-light {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 20px;
color: var(--gypsum);
background: transparent;
border: 1px solid var(--gypsum);
border-radius: 24px;
padding: 14px 20px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
text-decoration: none;
transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
white-space: nowrap;
}
.btn-outline-light:hover {
background: var(--aqua);
border-color: var(--aqua);
color: var(--navy);
transform: translateY(-1px);
}
.btn-outline-light:active {
background: var(--banana);
border-color: var(--banana);
color: var(--navy);
transform: translateY(0);
}
/* ── MEDIA / IMAGE PLACEHOLDER ────────────────────────────── */
.media-placeholder {
border-radius: 24px;
border: 1px solid var(--blackberry);
background: var(--rad-blue);
flex-shrink: 0;
overflow: hidden;
}
.media-placeholder--square {
width: 400px;
height: 400px;
}
.media-placeholder--widescreen {
width: 400px;
height: 225px;
}
/* ── FOOTER ───────────────────────────────────────────────── */
/* Canonical footer — used on all pages, inside .page-wrap */
.site-footer {
background: var(--grape);
padding: 24px 16px;
text-align: center;
width: 100%;
position: relative;
}
.site-footer p {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 15px;
color: var(--dusty);
}
.site-footer span {
color: var(--neon-pink);
}
/* Secret Button */
.secret-button {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 16px;
color: rgba(250, 250, 250, 0.15); /* Very faint over grape */
background: transparent;
padding: 8px 24px;
border-radius: 32px;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
text-decoration: none;
}
.secret-button::after {
content: "Utilities";
}
.secret-button:hover {
color: #007A78;
background: transparent;
}
.secret-button:active {
color: var(--grape);
background: var(--grape);
}
/* ══════════════════════════════════════════════════════════
NAV
Canonical nav from homepage-responsive_v6_1.html.
"Say hello!" (.nav-btn-cta) is styled identical to .nav-btn
(no border, same Inter 14px) — this is intentional and locked.
.nav-btn-mobile-cta in the mobile drawer retains the same style.
══════════════════════════════════════════════════════════ */
.nav-wrap {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 40px);
max-width: 1000px;
z-index: 100;
}
.nav-pill {
height: 52px;
border-radius: 26px;
background: linear-gradient(rgba(250, 250, 250, 0.4) 10%, rgba(250, 250, 250, 0.82));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 0.5px solid rgba(38, 15, 37, 0.09);
box-shadow: 0 12px 12px 2px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 4px 4px 8px;
}
.nav-logo {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--blackberry);
text-decoration: none;
padding: 8px 16px;
border-radius: 21px;
transition: background 150ms ease;
white-space: nowrap;
}
.nav-logo span {
color: var(--neon-pink);
}
.nav-logo:hover {
background: var(--aqua);
}
.nav-logo:active {
background: var(--banana);
}
.nav-buttons {
display: flex;
align-items: center;
gap: 24px;
}
.nav-group {
display: flex;
align-items: center;
gap: 8px;
}
.nav-btn {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--blackberry);
background: transparent;
border: none;
border-radius: 21px;
padding: 9px 12px;
cursor: pointer;
height: 42px;
display: flex;
align-items: center;
transition: background 150ms ease;
white-space: nowrap;
text-decoration: none;
}
.nav-btn:hover {
background: var(--aqua);
}
.nav-btn:active {
background: var(--banana);
}
.nav-arrow-icon {
width: 14px;
height: 14px;
margin-left: 6px;
vertical-align: middle;
display: inline-block;
flex-shrink: 0;
position: relative;
top: 0; /* Optical alignment */
}
/* "Say hello!" — same style as nav-btn (intentional, locked) */
.nav-btn-cta {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--blackberry);
background: transparent;
border: none;
border-radius: 21px;
padding: 9px 12px;
height: 42px;
display: flex;
align-items: center;
cursor: pointer;
transition: background 150ms ease;
white-space: nowrap;
text-decoration: none;
}
.nav-btn-cta:hover {
background: var(--aqua);
}
.nav-btn-cta:active {
background: var(--banana);
}
/* ── MOBILE NAV ───────────────────────────────────────────── */
.nav-mobile {
display: none;
}
.nav-mobile-container {
border-radius: 24px;
background: linear-gradient(rgba(250, 250, 250, 0.4) 10%, rgba(250, 250, 250, 0.82));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 0.5px solid rgba(38, 15, 37, 0.09);
box-shadow: 0 20px 39px 0 rgba(79, 78, 78, 0.14);
overflow: hidden;
}
.nav-mobile-bar {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 4px 4px 8px;
}
.nav-mobile-drawer {
max-height: 0;
overflow: hidden;
transition: max-height 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-mobile.open .nav-mobile-drawer {
max-height: 320px;
}
.nav-mobile-drawer-inner {
border-top: 1px solid var(--largo-teal);
padding: 6px 16px 12px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.nav-mobile-drawer-inner .nav-btn {
justify-content: flex-end;
min-width: 120px;
}
.nav-btn-mobile-cta {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--blackberry);
background: transparent;
border: none;
border-radius: 21px;
padding: 9px 12px;
cursor: pointer;
height: 42px;
min-width: 120px;
display: flex;
align-items: center;
justify-content: flex-end;
transition: background 150ms ease;
white-space: nowrap;
}
.nav-btn-mobile-cta:hover {
background: var(--aqua);
}
.nav-btn-mobile-cta:active {
background: var(--banana);
}
.nav-hamburger {
width: 42px;
height: 42px;
border: none;
background: transparent;
border-radius: 21px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 150ms ease;
position: relative;
}
.nav-hamburger:hover {
background: var(--aqua);
}
.nav-hamburger:active {
background: var(--banana);
}
.icon-hamburger,
.icon-close {
position: absolute;
transition: opacity 200ms ease, transform 200ms ease;
}
.icon-hamburger {
opacity: 1;
transform: rotate(0deg);
}
.icon-close {
opacity: 0;
transform: rotate(-90deg);
}
.nav-mobile.open .icon-hamburger {
opacity: 0;
transform: rotate(90deg);
}
.nav-mobile.open .icon-close {
opacity: 1;
transform: rotate(0deg);
}
/* ── INLINE CONTACT SUBMIT BUTTON ────────────────────────────────────────── */
/* The contact section's inline "Send it" button (distinct from .modal-submit-btn) */
.submit-btn {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 16px;
color: var(--gypsum);
background: var(--eggplant);
border: 1px solid transparent;
border-radius: 24px;
padding: 0 32px;
height: 48px;
min-width: 140px;
cursor: pointer;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms ease;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
position: relative;
z-index: 2;
}
.submit-btn:hover:not(.sent) {
background: var(--aqua);
color: var(--navy);
transform: translateY(-1px);
}
.submit-btn:hover:not(.sent) .btn-arrow {
color: var(--navy);
}
.submit-btn:active:not(.sent) {
background: var(--banana);
color: var(--navy);
transform: translateY(0);
}
.submit-btn:active:not(.sent) .btn-arrow {
color: var(--navy);
}
.submit-btn .btn-arrow {
color: var(--neon-pink);
transition: color 150ms ease;
}
.submit-btn.sent {
background: transparent;
color: rgba(38, 15, 37, 0.4);
border-color: rgba(38, 15, 37, 0.4);
cursor: default;
transform: none;
}
.submit-btn.sent .btn-arrow {
display: none;
}
/* ── CONTACT MODAL ────────────────────────────────────────── */
/* Shared modal used on homepage (and "Say hello!" on all pages) */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(38, 15, 37, 0.35);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 250ms ease;
}
.modal-overlay.open {
opacity: 1;
pointer-events: all;
}
.modal-glass {
background: linear-gradient(160deg, rgba(250, 250, 250, 0.82) 0%, rgba(250, 250, 250, 0.96) 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 0.5px solid rgba(38, 15, 37, 0.09);
box-shadow: 0 32px 64px rgba(38, 15, 37, 0.18), 0 8px 24px rgba(38, 15, 37, 0.08);
border-radius: 24px;
padding: 36px 36px 32px;
width: 100%;
max-width: 480px;
transform: translateY(16px) scale(0.98);
transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 250ms ease;
opacity: 0;
position: relative;
}
.modal-overlay.open .modal-glass {
transform: translateY(0) scale(1);
opacity: 1;
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 150ms;
color: var(--blackberry);
opacity: 0.4;
}
.modal-close:hover {
background: var(--aqua);
opacity: 1;
}
.modal-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 28px;
color: var(--blackberry);
margin-bottom: 4px;
}
.modal-title .pink {
color: var(--neon-pink);
}
.modal-intro {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--charcoal);
opacity: 0.75;
margin-bottom: 24px;
}
.modal-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.modal-form .form-group {
gap: 4px;
}
.modal-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.modal-footer-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 8px;
}
.modal-cancel-btn {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--charcoal);
background: transparent;
border: none;
border-radius: 20px;
padding: 12px 20px;
cursor: pointer;
opacity: 0.55;
transition: opacity 150ms, background 150ms;
}
.modal-cancel-btn:hover {
opacity: 1;
background: rgba(38, 15, 37, 0.05);
}
.modal-submit-btn {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--gypsum);
background: var(--eggplant);
border: none;
border-radius: 24px;
padding: 12px 28px;
cursor: pointer;
transition: filter 150ms ease, transform 100ms ease;
display: flex;
align-items: center;
gap: 4px;
}
.modal-submit-btn:hover {
filter: brightness(1.12);
transform: translateY(-1px);
}
.modal-submit-btn:active {
filter: brightness(0.95);
}
.modal-submit-btn .btn-arrow {
color: var(--neon-pink);
}
.modal-char-counter {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: var(--charcoal);
opacity: 0.5;
text-align: right;
margin-top: 3px;
transition: color 150ms ease, opacity 150ms ease;
}
.modal-char-counter.near-limit {
color: var(--whoops);
opacity: 1;
}
.modal-success {
display: none;
text-align: center;
padding: 24px 0 8px;
}
.modal-success.visible {
display: block;
}
.modal-form.hidden,
.modal-title.hidden,
.modal-intro.hidden {
display: none;
}
.modal-done-btn {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--gypsum);
background: var(--eggplant);
border: 1px solid transparent;
border-radius: 24px;
padding: 12px 36px;
cursor: pointer;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms ease;
display: inline-flex;
align-items: center;
}
.modal-done-btn:hover {
background: var(--aqua);
color: var(--navy);
transform: translateY(-1px);
}
.modal-done-btn:active {
background: var(--banana);
color: var(--blackberry);
transform: translateY(0);
}
/* ── FORM ELEMENTS (shared inline + modal) ────────────────── */
.form-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-label {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.5px;
color: var(--blackberry);
margin-bottom: 4px;
}
.form-input,
.form-textarea {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--blackberry);
background: var(--dusty);
border: 1px solid var(--charcoal);
border-radius: 12px;
padding: 10px 12px;
transition: border-color 200ms, background 200ms;
outline: none;
width: 100%;
resize: none;
-webkit-appearance: none;
position: relative;
z-index: 2;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--charcoal);
opacity: 0.4;
font-family: 'Inter', sans-serif;
font-size: 14px;
}
.form-input:focus,
.form-textarea:focus {
background: var(--gypsum);
border-color: var(--eggplant);
}
.form-input:focus::placeholder,
.form-textarea:focus::placeholder {
opacity: 0.2;
}
.form-input.error,
.form-textarea.error {
border-color: var(--whoops) !important;
box-shadow: 0 0 0 3px rgba(179, 17, 17, 0.12) !important;
}
.form-textarea {
height: 111px;
line-height: 1.6;
}
.char-counter {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: var(--charcoal);
opacity: 0.5;
text-align: right;
margin-top: 4px;
transition: color 150ms ease, opacity 150ms ease;
}
.char-counter.near-limit {
color: var(--whoops);
opacity: 1;
}
/* ── SUCCESS STATE (shared) ───────────────────────────────── */
.success-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--lime);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.success-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 32px;
color: var(--blackberry);
margin-bottom: 12px;
}
.success-body {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: var(--charcoal);
line-height: 1.6;
max-width: 380px;
margin: 0 auto;
}
/* ══════════════════════════════════════════════════════════
GLOBAL UTILITIES
══════════════════════════════════════════════════════════ */
/* Video Hover Container
Fades between a static image and a looping video on hover.
Requires an ![]()
and a