/* ============================================ GABRIEL GUEVARA — PERSONAL PORTFOLIO Design tokens, typography, layout, animations ============================================ */ /* Fonts loaded via Google Fonts CDN in HTML */ /* --- Design Tokens --- */ /* Palette: Parchment / Forest / Rust / Tan / Cobalt */ :root { --color-bg: rgb(255, 250, 245); --color-bg-elevated: #FFFFFF; --color-surface: #E8E2D8; --color-text-primary: #1C3A2B; --color-text-muted: #4D6355; --color-accent: #B84C2E; --color-accent-hover: #9A3D24; --color-accent-subtle: #C5A882; --color-cobalt: #1B3FBD; --color-divider: #D5CCBE; --font-serif: 'Young Serif', Georgia, 'Times New Roman', serif; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem; --max-width: 1200px; --max-width-narrow: 720px; } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.7; color: var(--color-text-primary); background-color: var(--color-bg); overflow-x: hidden; } a { color: var(--color-accent); text-decoration: none; transition: color 0.25s ease; } a:hover { color: var(--color-cobalt); } img { max-width: 100%; height: auto; display: block; } ::selection { background-color: var(--color-accent); color: #FFFFFF; } /* --- Typography --- */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.15; } h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.02em; } h1 em, h2 em { font-style: italic; color: var(--color-accent); } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--color-text-primary); } h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); } p { max-width: 65ch; color: var(--color-text-muted); font-size: 1.0625rem; line-height: 1.75; } .label { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-cobalt); /* Cobalt on Parchment: 7.23:1 — PASS AA */ } .mono { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-muted); letter-spacing: 0.02em; } /* --- Layout --- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } .section { padding: var(--space-3xl) 0; } .divider { width: 100%; height: 1px; background: var(--color-divider); border: none; } /* --- Navigation --- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--space-md) 0; transition: background-color 0.4s ease, padding 0.4s ease; } .nav.scrolled { background-color: rgba(242, 237, 228, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-divider); } .nav__inner { display: flex; justify-content: space-between; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } .nav__name { font-family: var(--font-serif); font-size: 1.125rem; color: var(--color-text-primary); text-decoration: none; transition: color 0.25s ease; } .nav__name:hover { color: var(--color-cobalt); } .nav__links { display: flex; gap: var(--space-lg); list-style: none; } .nav__links a { font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.25s ease; } .nav__links a:hover { color: var(--color-text-primary); } /* Mobile nav toggle */ .nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-xs); } .nav__toggle span { display: block; width: 24px; height: 1.5px; background: var(--color-text-primary); margin: 6px 0; transition: transform 0.3s ease, opacity 0.3s ease; } /* --- Hero --- */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-3xl) var(--space-md); padding-top: 7rem; position: relative; } .hero__label { opacity: 0; transform: translateY(16px); animation: fadeInUp 0.8s ease forwards; animation-delay: 0.1s; margin-bottom: var(--space-md); } .hero__name { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease forwards; animation-delay: 0.25s; margin-bottom: var(--space-md); color: var(--color-text-primary); } .hero__tagline { font-size: clamp(1rem, 1.8vw, 1.1875rem); color: var(--color-text-muted); max-width: 54ch; margin: 0 auto var(--space-xl); opacity: 0; transform: translateY(16px); animation: fadeInUp 0.8s ease forwards; animation-delay: 0.5s; line-height: 1.7; } /* Stats strip */ .hero__stats { display: flex; gap: var(--space-xl); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-xl); opacity: 0; transform: translateY(16px); animation: fadeInUp 0.8s ease forwards; animation-delay: 0.7s; } .hero__stat { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .hero__stat-number { font-family: var(--font-serif); font-size: 2rem; color: var(--color-cobalt); line-height: 1; } .hero__stat-label { font-size: 0.75rem; color: var(--color-text-muted); letter-spacing: 0.02em; } /* Hero CTAs */ .hero__ctas { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(16px); animation: fadeInUp 0.8s ease forwards; animation-delay: 0.9s; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.75rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 4px; text-decoration: none; transition: all 0.25s ease; cursor: pointer; } .btn--primary { background: var(--color-text-primary); color: var(--color-bg); } .btn--primary:hover { background: var(--color-accent); color: #FFFFFF; } .btn--secondary { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-divider); } .btn--secondary:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); } .hero__scroll { position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); opacity: 0; animation: fadeInUp 0.8s ease forwards; animation-delay: 1.1s; } .hero__scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--color-accent), transparent); margin: 0 auto; } /* --- About --- */ .about__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; } .about__content { display: flex; flex-direction: column; gap: var(--space-md); } .about__label { margin-bottom: var(--space-sm); } .about__content p { color: var(--color-text-muted); } .about__content p:first-of-type { color: var(--color-text-primary); font-size: 1.125rem; } /* --- About Timeline --- */ .about__sidebar { display: flex; flex-direction: column; padding-top: 2.5rem; } .about__timeline { display: flex; flex-direction: column; gap: var(--space-md); } .about__timeline-item { display: flex; gap: var(--space-md); align-items: baseline; padding-left: var(--space-sm); border-left: 1px solid var(--color-divider); } .about__timeline-item .mono { flex-shrink: 0; min-width: 2.5rem; } /* --- Selected Work (Case Studies) --- */ .work__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-xl); } .work__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } .work__grid--single { grid-template-columns: 1fr; } .work-card { background: var(--color-bg-elevated); border: 1px solid var(--color-divider); border-radius: 4px; padding: var(--space-lg); } .work-card--featured { padding: var(--space-xl); } /* Tags */ .work-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md); } .work-card__tag { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-primary); background: rgba(28, 58, 43, 0.06); padding: 0.25rem 0.625rem; border-radius: 2px; border: 1px solid rgba(28, 58, 43, 0.15); /* Forest on Parchment: 10.66:1 — PASS AA */ } .work-card__title { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--color-text-primary); line-height: 1.35; margin-bottom: var(--space-lg); } .work-card__body { display: flex; flex-direction: column; gap: var(--space-lg); } .work-card__section { display: flex; flex-direction: column; gap: 0.5rem; } .work-card__section-label { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-subtle); } .work-card__summary { font-size: 0.9375rem; line-height: 1.75; color: var(--color-text-muted); max-width: none; } .work-card__outcomes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .work-card__outcomes li { font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-muted); padding-left: 1.25rem; position: relative; } .work-card__outcomes li::before { content: ''; position: absolute; left: 0; top: 0.625rem; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-subtle); } /* --- Approach (6-cell grid) --- */ .approach { background: var(--color-surface); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); } .approach__header { margin-bottom: var(--space-xl); } .approach__grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); border-radius: 4px; overflow: hidden; } .approach__cell { background: var(--color-bg); padding: var(--space-lg); transition: background-color 0.3s ease; } .approach__cell:hover { background: var(--color-bg-elevated); } .approach__cell-num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-cobalt); display: block; margin-bottom: var(--space-sm); } .approach__cell-title { font-family: var(--font-serif); font-size: 1.125rem; color: var(--color-text-primary); margin-bottom: 0.75rem; line-height: 1.3; } .approach__cell p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-muted); max-width: none; } /* --- Currently (Scattered collage) --- */ .currently-section { background: var(--color-cobalt); border-top: 1px solid var(--color-cobalt); border-bottom: 1px solid var(--color-cobalt); } .currently-section .label { color: var(--color-bg); /* Parchment on Cobalt: 8.15:1 — PASS AA */ } .currently-section h2 { color: var(--color-bg); /* Parchment on Cobalt: 7.23:1 — PASS AA */ } .currently__intro { margin-bottom: var(--space-xl); } /* Scatter container — mobile: stacked flex */ .currently__scatter { display: flex; flex-direction: column; gap: var(--space-md); } .currently__card { border-radius: 3px; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease; cursor: default; } .currently__card-label { display: block; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.625rem; color: var(--color-bg); /* Parchment on Cobalt: 8.15:1 — PASS AA */ } /* Post-it note */ .currently__postit { background-image: url('../images/postit-bg.png'); background-size: cover; background-position: center; padding: 3rem 2.75rem 3rem; filter: drop-shadow(3px 6px 20px rgba(0,0,0,0.35)); } .currently__postit .currently__card-label { color: rgba(28, 58, 43, 0.65); } .currently__postit-text { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-primary); max-width: none; /* Forest on #F5E136: ~10:1 — PASS AA */ } /* Book cover */ .currently__book { display: flex; flex-direction: column; background: transparent; } .currently__book-cover { line-height: 0; } .currently__book-img { width: 100%; height: auto; display: block; filter: drop-shadow(4px 8px 24px rgba(0,0,0,0.55)); } .currently__book-badge { padding: 0.5rem 0.25rem 0; background: transparent; } .currently__book .currently__card-label { display: inline; background: #F5E136; color: var(--color-text-primary); padding: 0.1em 0.35em; margin-bottom: 0; border-radius: 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; /* Forest on yellow: ~10:1 — PASS AA */ } /* Vinyl sleeve */ .currently__vinyl { background: transparent; } .currently__vinyl-sleeve { width: 100%; line-height: 0; } .currently__vinyl-img { width: 100%; height: auto; display: block; filter: drop-shadow(4px 8px 24px rgba(0,0,0,0.55)); } .currently__vinyl-caption { padding: 0.625rem 0.25rem 0; } .currently__vinyl-title { font-family: var(--font-serif); font-size: 1rem; color: var(--color-bg); line-height: 1.45; max-width: none; margin-bottom: 0.25rem; /* Parchment on near-black: well above 14:1 — PASS AA */ } .currently__vinyl-artist { font-size: 0.8125rem; color: var(--color-bg); max-width: none; /* Parchment on Cobalt: 8.15:1 — PASS AA */ } /* Craft / Building card */ .currently__craft { background: var(--color-bg); padding: 1.75rem 1.5rem; box-shadow: 2px 4px 18px rgba(0,0,0,0.22); } .currently__craft .currently__card-label { color: var(--color-cobalt); /* Cobalt on Parchment: 7.23:1 — PASS AA */ } .currently__craft-text { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-muted); max-width: none; /* #4D6355 on Parchment: 5.57:1 — PASS AA */ } /* Polaroid photos — frame is baked into the image */ .currently__polaroid { background: transparent; line-height: 0; } .currently__polaroid-img { width: 100%; height: auto; display: block; filter: drop-shadow(3px 6px 20px rgba(0,0,0,0.35)); } .currently__polaroid-label { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--color-bg); letter-spacing: 0.04em; text-align: center; padding-top: 0.625rem; line-height: 1.4; max-width: none; /* Parchment on Cobalt: 8.15:1 — PASS AA */ } /* Scatter central title — desktop only */ .currently__scatter-title { display: none; } /* --- Contact --- */ .contact { background: var(--color-text-primary); color: var(--color-bg); } .contact .label { color: var(--color-accent-subtle); /* Tan on Forest: 5.50:1 — PASS AA */ } .contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); } .contact__heading { color: var(--color-bg); margin-top: 0.75rem; margin-bottom: var(--space-md); } .contact__heading em { color: var(--color-accent); } .contact__body { color: var(--color-accent-subtle); font-size: 1rem; line-height: 1.75; max-width: 50ch; margin-bottom: var(--space-lg); /* Tan on Forest: 5.50:1 — PASS AA */ } .contact__links { display: flex; flex-direction: column; gap: var(--space-sm); } .contact__link { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-bg); font-size: 1rem; font-weight: 500; text-decoration: none; padding: 0.75rem 0; border-bottom: 1px solid rgba(197, 168, 130, 0.25); transition: color 0.25s ease; } .contact__link:hover { color: var(--color-accent-subtle); /* Tan on Forest: 5.50:1 — PASS AA */ } .contact__link-num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent-subtle); min-width: 1.5rem; /* Tan on Forest: 5.50:1 — PASS AA */ } /* Availability card */ .avail { background: rgba(197, 168, 130, 0.08); border: 1px solid rgba(197, 168, 130, 0.2); border-radius: 6px; padding: var(--space-lg); } .avail__status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-accent-subtle); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-md); /* Tan on Forest: 5.50:1 — PASS AA */ } .avail__dot { width: 8px; height: 8px; border-radius: 50%; background: #2E8B57; flex-shrink: 0; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .avail__heading { font-family: var(--font-serif); font-size: 1.125rem; color: var(--color-bg); line-height: 1.45; margin-bottom: var(--space-sm); max-width: none; } .avail__body { font-size: 0.9375rem; color: var(--color-accent-subtle); line-height: 1.7; margin-bottom: var(--space-md); max-width: none; /* Tan on Forest: 5.50:1 — PASS AA */ } .avail__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .avail__tag { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-subtle); background: rgba(197, 168, 130, 0.1); padding: 0.3rem 0.625rem; border-radius: 2px; border: 1px solid rgba(197, 168, 130, 0.25); /* Tan on Forest: 5.50:1 — PASS AA */ } /* --- Footer --- */ .footer { padding: var(--space-md) 0; border-top: 1px solid var(--color-divider); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); } .footer__bottom span { font-size: 0.8125rem; color: var(--color-accent-subtle); } /* --- Scroll Reveal Animation --- */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; } [data-reveal].visible { opacity: 1; transform: translateY(0); } /* Stagger children */ [data-reveal-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-reveal-stagger].visible > *:nth-child(1) { transition-delay: 0s; } [data-reveal-stagger].visible > *:nth-child(2) { transition-delay: 0.1s; } [data-reveal-stagger].visible > *:nth-child(3) { transition-delay: 0.2s; } [data-reveal-stagger].visible > *:nth-child(4) { transition-delay: 0.3s; } [data-reveal-stagger].visible > *:nth-child(5) { transition-delay: 0.4s; } [data-reveal-stagger].visible > * { opacity: 1; transform: translateY(0); } /* --- Keyframe Animations --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* --- Responsive --- */ /* Tablet (768px+) */ @media (min-width: 768px) { .about__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-3xl); } .approach__grid { grid-template-columns: 1fr 1fr; } .currently__scatter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; } .contact__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } .work-card__body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-lg); } } /* Desktop (1024px+) */ @media (min-width: 1024px) { .section { padding: var(--space-3xl) 0; } .hero { min-height: 100vh; } .hero__stats { gap: var(--space-3xl); } .approach__grid { grid-template-columns: 1fr 1fr 1fr; } } /* Mobile (below 768px) */ @media (max-width: 767px) { :root { --space-3xl: 5rem; --space-2xl: 3.5rem; } .nav__links { position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; background: var(--color-bg); flex-direction: column; justify-content: center; align-items: center; gap: var(--space-lg); transition: right 0.4s ease; border-left: 1px solid var(--color-divider); } .nav__links.open { right: 0; } .nav__links a { font-size: 1.25rem; } .nav__toggle { display: block; z-index: 101; } .nav__toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__toggle.open span:nth-child(2) { opacity: 0; } .nav__toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } h1 { font-size: clamp(2rem, 8vw, 3rem); } .hero__stats { gap: var(--space-md); } .hero__stat { min-width: 40%; } .work-card, .work-card--featured { padding: var(--space-md); } .contact__grid { gap: var(--space-lg); } .about__timeline-item { flex-direction: column; gap: 0.25rem; } } /* Desktop scatter layout — Currently section */ @media (min-width: 1100px) { /* Hide stacked intro — title lives inside the collage */ .currently__intro { display: none; } .currently__scatter { display: block; position: relative; height: 820px; } .currently__card { position: absolute; } .currently__card:hover { z-index: 10; } /* Central title — floats in the middle of the collage */ .currently__scatter-title { display: block; position: absolute; top: 310px; left: 50%; transform: translateX(-50%); text-align: center; width: 360px; z-index: 1; pointer-events: none; } .currently__scatter-title h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.2; } /* Family polaroid — upper left, strong tilt */ .currently__polaroid--family { width: 210px; top: 10px; left: 0; transform: rotate(-8deg); z-index: 3; } .currently__polaroid--family:hover { transform: rotate(0deg) scale(1.03); } .currently__polaroid--family:hover .currently__polaroid-img { filter: drop-shadow(6px 12px 32px rgba(0,0,0,0.55)); } /* Office polaroid — upper right, opposite tilt */ .currently__polaroid--office { width: 210px; top: 20px; left: 74.6%; transform: rotate(6deg); z-index: 3; } .currently__polaroid--office:hover { transform: rotate(0deg) scale(1.03); } .currently__polaroid--office:hover .currently__polaroid-img { filter: drop-shadow(6px 12px 32px rgba(0,0,0,0.55)); } /* Book — upper center, leans over the title */ .currently__book { width: 210px; top: 40px; left: 26.9%; transform: rotate(4deg); z-index: 4; } .currently__book:hover { transform: rotate(0deg) scale(1.02); } .currently__book:hover .currently__book-img { filter: drop-shadow(6px 14px 32px rgba(0,0,0,0.7)); } .currently__book-cover { min-height: unset; } .currently__book-img { width: 100%; height: auto; } /* Vinyl — lower left */ .currently__vinyl { width: 252px; top: 450px; left: 1.7%; transform: rotate(-3deg); z-index: 4; } .currently__vinyl:hover { transform: rotate(0deg) scale(1.02); } .currently__vinyl:hover .currently__vinyl-img { filter: drop-shadow(6px 14px 32px rgba(0,0,0,0.7)); } /* Post-it — bottom center */ .currently__postit { width: 340px; top: 540px; left: 26.9%; transform: rotate(2.5deg); z-index: 5; } .currently__postit:hover { transform: rotate(0deg) scale(1.02); filter: drop-shadow(6px 12px 32px rgba(0,0,0,0.55)); } /* Craft card — lower right */ .currently__craft { width: 310px; top: 470px; left: 68.6%; transform: rotate(-3.5deg); z-index: 3; } .currently__craft:hover { transform: rotate(0deg) scale(1.02); box-shadow: 8px 14px 40px rgba(0,0,0,0.35); } } /* ============================================ DARK MODE Must appear after all component rules so equal-specificity overrides win by cascade. ============================================ */ @media (prefers-color-scheme: dark) { :root { --color-bg: rgb(18, 20, 18); --color-bg-elevated: rgb(26, 30, 26); --color-surface: rgb(34, 40, 34); --color-text-primary: rgb(238, 235, 230); --color-text-muted: rgb(140, 170, 150); --color-accent: rgb(225, 115, 82); --color-accent-hover: rgb(230, 120, 88); --color-accent-subtle: rgb(195, 165, 118); --color-cobalt: rgb(100, 140, 230); --color-divider: rgb(45, 55, 45); } /* Nav: hardcoded parchment scrolled bg fails against dark-mode text colors */ .nav.scrolled { background-color: rgba(18, 20, 18, 0.95); } /* Selection: cobalt bg + near-black text → 5.67:1 */ ::selection { background-color: var(--color-cobalt); color: var(--color-bg); } /* Contact: keep dark to mirror light-mode dark-forest feel */ .contact { background: rgb(22, 38, 28); } .contact, .contact__heading, .contact__link { color: var(--color-text-primary); } /* Currently section: dark navy keeps accent-subtle labels at 6.92:1 */ .currently-section { background: rgb(18, 30, 68); border-color: rgb(18, 30, 68); } .currently-section h2, .currently__vinyl-title { color: var(--color-text-primary); } /* Labels use --color-bg (near-black) globally — swap to cream on dark navy */ .currently-section .label, .currently__card-label, .currently__vinyl-artist, .currently__polaroid-label { color: var(--color-text-primary); } /* Book badge: text-primary (cream) on #F5E136 yellow = 1.1:1 — restore dark forest */ .currently__book .currently__card-label { color: #1C3A2B; } /* Work card tags: hardcoded forest rgba bg/border is invisible on near-black */ .work-card__tag { background: rgba(220, 235, 225, 0.07); border-color: rgba(220, 235, 225, 0.16); } }