/* Rachel Sobrepeña · Portfolio Shared stylesheet. Typography + palette controlled via CSS custom properties on :root, set by the Tweaks panel (or fallback defaults below). */ :root { /* Palette: Bone (default) · WCAG AA verified */ --bg: #f4eee2; --bg-soft: #ebe4d4; --bg-card: #faf5ec; --ink: #1c1813; --ink-soft: #4a4339; --muted: #6b6354; --rule: #d4cab6; --accent: #a8451f; --accent-soft: #cf7551; /* Typography pairing: Editorial (default) */ --font-display: "Instrument Serif", "Times New Roman", serif; --font-body: "Geist", "Helvetica Neue", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Scale */ --col-w: 1280px; --gutter: clamp(20px, 4vw, 64px); } /* Palette themes (toggled by data attribute on ) */ html[data-palette="slate"] { --bg: #f0efeb; --bg-soft: #e5e3dc; --bg-card: #f6f5f0; --ink: #14181f; --ink-soft: #404652; --muted: #5d6577; --rule: #cbcec6; --accent: #324a72; --accent-soft: #6e85ac; } html[data-palette="mocha"] { --bg: #171311; --bg-soft: #221d1a; --bg-card: #1f1a17; --ink: #f4ebdd; --ink-soft: #cebfa8; --muted: #a89978; --rule: #3a3026; --accent: #e88a5e; --accent-soft: #b8633f; } /* Typography pairing: Modern (alt) */ html[data-type="modern"] { --font-display: "Newsreader", "Georgia", serif; --font-body: "Geist", "Helvetica Neue", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; transition: background-color .35s ease, color .35s ease; } a { color: inherit; text-decoration: none; } /* Layout */ .wrap { max-width: var(--col-w); margin: 0 auto; padding: 0 var(--gutter); } /* Top nav */ .nav { padding-block: 28px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .nav .name { font-family: var(--font-display); font-style: italic; font-size: 22px; letter-spacing: -.01em; } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); } .nav a:hover { color: var(--accent); } .avail { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); } .avail .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ea36a; box-shadow: 0 0 0 3px color-mix(in oklab, #4ea36a 28%, transparent); } /* Meta labels */ .meta { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } /* Hero */ .hero { padding-block: clamp(80px, 14vh, 180px) clamp(60px, 10vh, 140px); border-bottom: 1px solid var(--rule); } .hero .eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); margin-bottom: 36px; display: flex; align-items: center; gap: 14px; } .hero .eyebrow::after { content: ""; flex: 0 0 64px; height: 1px; background: var(--rule); } .hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 8.5vw, 132px); line-height: 1.02; letter-spacing: -.02em; margin: 0; text-wrap: balance; color: var(--ink); } .hero h1 em { font-style: italic; color: var(--accent); } .hero .lede { max-width: 640px; margin-top: 40px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; } /* Section heads */ .section { padding-block: clamp(80px, 12vh, 140px); border-bottom: 1px solid var(--rule); } .sect-hd { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 56px; } @media (min-width: 900px) { .sect-hd { grid-template-columns: 200px 1fr; gap: 64px; align-items: baseline; } } .sect-hd .num { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .sect-hd h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.5vw, 56px); letter-spacing: -.015em; line-height: 1.05; margin: 0; } .sect-hd h2 em { font-style: italic; color: var(--accent); } /* Work index */ .work-list { border-top: 1px solid var(--rule); } .work-row { display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; position: relative; transition: padding .35s ease; } @media (min-width: 900px) { .work-row { grid-template-columns: 80px 1.2fr 1fr 0.8fr 100px; gap: 32px; align-items: baseline; padding: 36px 0; } } .work-row .idx { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .08em; } .work-row .title { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.01em; line-height: 1.05; } .work-row .title em { font-style: italic; } .work-row .client { font-size: 14px; color: var(--ink-soft); } .work-row .year { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .work-row .cta { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; } .work-row .cta .arrow { display: inline-block; transition: transform .35s ease; } .work-row[href]:hover .cta .arrow { transform: translateX(6px); } .work-row[href]:hover .title { color: var(--accent); } .work-row.disabled { opacity: .55; pointer-events: none; } .work-row.disabled .cta { color: var(--muted); } /* About + bio */ .bio-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 900px) { .bio-grid { grid-template-columns: 200px 1fr 1fr; gap: 64px; align-items: start; } } .bio-grid .meta { padding-top: 6px; } .bio p { font-size: 19px; line-height: 1.55; margin: 0 0 24px; color: var(--ink-soft); text-wrap: pretty; } .bio p strong { color: var(--ink); font-weight: 500; } .bio .lead { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin-bottom: 32px; } .bio .lead em { font-style: italic; color: var(--accent); } /* Background list (work history + education) */ .timeline { display: grid; grid-template-columns: 1fr; gap: 0; } .tl-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 24px 0; border-top: 1px solid var(--rule); } @media (min-width: 700px) { .tl-row { grid-template-columns: 140px 1.4fr 1fr; gap: 32px; align-items: baseline; } } .tl-row:last-child { border-bottom: 1px solid var(--rule); } .tl-row .when { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .tl-row .what { font-family: var(--font-display); font-size: 22px; letter-spacing: -.005em; } .tl-row .where { font-size: 14px; color: var(--ink-soft); } /* Skills */ .skill-cluster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 56px; } .skill-cluster h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 16px; } .skill-cluster ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .skill-cluster li { font-size: 15px; color: var(--ink); } /* Footer / contact */ .contact { padding-block: clamp(100px, 16vh, 200px) clamp(40px, 6vh, 80px); } .contact .invite { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 88px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 48px; text-wrap: balance; } .contact .invite em { font-style: italic; color: var(--accent); } .contact .invite a { border-bottom: 1px solid currentColor; } .contact .invite a:hover { color: var(--accent); } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding-top: 32px; border-top: 1px solid var(--rule); } .contact-grid .item h5 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 8px; } .contact-grid .item p, .contact-grid .item a { font-size: 15px; color: var(--ink); margin: 0; } .contact-grid .item a:hover { color: var(--accent); } .colophon { margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } /* ─── Case study page ─── */ .cs-nav { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); } .cs-nav-inner { display: flex; justify-content: space-between; align-items: center; padding-block: 18px; } .cs-back { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); } .cs-back:hover { color: var(--accent); } .cs-back .arrow { display: inline-block; margin-right: 8px; } .cs-hero { padding-block: clamp(80px, 12vh, 160px) clamp(60px, 8vh, 100px); border-bottom: 1px solid var(--rule); } .cs-hero .eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 32px; } .cs-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 7.5vw, 116px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 32px; text-wrap: balance; } .cs-hero h1 em { font-style: italic; color: var(--accent); } .cs-hero .lede { max-width: 700px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); } .cs-meta { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; padding-top: 32px; border-top: 1px solid var(--rule); } .cs-meta .item h5 { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 8px; } .cs-meta .item p { font-size: 15px; color: var(--ink); margin: 0; line-height: 1.45; } /* Slide-like sections */ .slide { padding-block: clamp(80px, 14vh, 160px); border-bottom: 1px solid var(--rule); } .slide.tight { padding-block: clamp(60px, 8vh, 100px); } .slide-hd { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 64px; } @media (min-width: 900px) { .slide-hd { grid-template-columns: 200px 1fr; gap: 64px; align-items: baseline; } } .slide-hd .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; } .slide-hd h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5.5vw, 72px); letter-spacing: -.02em; line-height: 1.05; margin: 0; text-wrap: balance; } .slide-hd h2 em { font-style: italic; color: var(--accent); } .slide-body { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 900px) { .slide-body.with-rail { grid-template-columns: 200px 1fr; gap: 64px; } .slide-body.split { grid-template-columns: 1fr 1fr; gap: 64px; } } .slide-body p { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; max-width: 68ch; text-wrap: pretty; } .slide-body p strong { color: var(--ink); font-weight: 500; } .slide-body .pull { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 0 0 32px; } .slide-body .pull em { font-style: italic; color: var(--accent); } /* Stat block */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin: 48px 0; padding: 48px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .stat .num { font-family: var(--font-display); font-size: clamp(56px, 8vw, 108px); line-height: 1; letter-spacing: -.03em; color: var(--accent); font-style: italic; } .stat .lbl { margin-top: 12px; font-size: 14px; color: var(--ink-soft); max-width: 28ch; } /* Image placeholder (labeled) */ .imgph { position: relative; width: 100%; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; } .imgph.tall { aspect-ratio: 4 / 5; } .imgph.square { aspect-ratio: 1 / 1; } .imgph.wide { aspect-ratio: 21 / 9; } .imgph::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, transparent 0, transparent 14px, color-mix(in oklab, var(--rule) 70%, transparent) 14px, color-mix(in oklab, var(--rule) 70%, transparent) 15px ); opacity: .8; } .imgph .ph-label { position: relative; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg-card); padding: 8px 14px; border: 1px solid var(--rule); border-radius: 100px; text-align: center; max-width: 80%; } /* Cards (insights, problem statements) */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .card { padding: 32px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 4px; } .card .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: block; } .card h4 { font-family: var(--font-display); font-size: 24px; letter-spacing: -.005em; line-height: 1.2; margin: 0 0 12px; font-weight: 400; } .card p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; } /* Process / phase list */ .phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 1px solid var(--rule); } .phase { padding: 32px 24px 32px 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); } .phase:last-child { border-right: none; } .phase .step { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .phase h4 { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; font-weight: 400; } .phase p { font-size: 13px; color: var(--ink-soft); margin: 0; } /* Notes blocks (instructional for placeholder) */ .note { margin: 16px 0; padding: 14px 18px; background: color-mix(in oklab, var(--accent) 8%, var(--bg-card)); border-left: 2px solid var(--accent); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); line-height: 1.55; border-radius: 2px; } .note b { color: var(--accent); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } /* Reflection / pull quote */ .quote { padding-block: clamp(60px, 10vh, 120px); border-bottom: 1px solid var(--rule); } .quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.5vw, 60px); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; max-width: 1000px; } .quote blockquote em { font-style: italic; color: var(--accent); } .quote .cite { margin-top: 32px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } /* Tweaks panel scale fix */ .twk-panel { transform: none !important; }