/* ========================================================================== Aviva Kaplan — portfolio styles Type scale, colours and layout measured from the original Wix site. Change the values in :root to update the whole site at once. ========================================================================== */ :root { /* --- Core colours --------------------------------------------------- */ --sage: #969E7D; /* home hero heading */ --sage-deep: #888F70; /* accent words in the home lede */ --peach: #DDBCA7; /* home hero glow */ --ink: #12181A; /* body text */ --ink-soft: #404040; /* project card titles */ --muted: #5E5D5A; /* captions */ --label: #9A9A96; /* ROLE / DATE / SKILLS labels */ --line: #DEDAD2; --bg: #FFFFFF; --band: #F5F3EF; /* the cream strip behind the meta row */ --link: #170DF2; /* active nav item */ /* Per-page accent. Each project page overrides this on . */ --accent: #12181A; /* --- Type ----------------------------------------------------------- Two originals are commercial fonts licensed to Wix, matched here with the nearest free equivalents: Gilroy -> Figtree (headings) Futura LT Book -> Jost (contact form) Every other family is exactly what the Wix site used. ------------------------------------------------------------------ */ --font-head: 'Figtree', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-label: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif; --font-value: 'Libre Baskerville', Georgia, serif; --font-form: 'Jost', 'Helvetica Neue', Arial, sans-serif; --font-ui: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --font-hero: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Fraunces', Georgia, serif; /* home hero lede only */ --font-btn: 'Questrial', 'Helvetica Neue', Arial, sans-serif; --max: 1120px; --gutter: clamp(20px, 5vw, 80px); --header-h: 84px; } /* Per-page themes ------------------------------------------------------ */ body.t-venmo { --accent: #0091FF; } /* Venmo blue */ body.t-southwest { --accent: #1B37F5; } /* Southwest blue */ body.t-indigo { --accent: #F5187F; --banner-bg: #7B4FC9; } /* Indigo pink */ body.t-teaching { --accent: #12181A; --band-bg: #DFEFE0; } /* mint */ body.t-rendering { --accent: #12181A; --band-bg: #93B8CE; } /* blue */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; } .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 200; } .skip-link:focus { left: 12px; top: 12px; } /* ========================================================================== Header — logo hard left, nav hard right, spanning the full width ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid #EFEDE8; transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease; } /* nav.js adds .is-scrolled once the page moves — the header goes translucent and the page content shows through it, as on the original site */ .site-header.is-scrolled { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: rgba(0, 0, 0, .06); box-shadow: 0 1px 14px rgba(0, 0, 0, .05); } .site-header__inner { padding-inline: clamp(12px, 2vw, 26px); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo img { width: 120px; height: auto; } .nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); } .nav a, .nav__trigger { font-family: var(--font-ui); font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; } .nav a:hover, .nav__trigger:hover { color: var(--sage-deep); } .nav a[aria-current="page"], .nav__trigger[aria-expanded="true"] { color: var(--link); } .nav__group { position: relative; } .nav__trigger::after { content: ""; display: inline-block; margin-left: 7px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); } .nav__menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 216px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.10); padding: 8px; margin: 0; list-style: none; opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s; } .nav__group::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 18px; } .nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu, .nav__menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav__menu a { display: block; padding: 9px 14px; border-radius: 7px; font-weight: 500; } .nav__menu a:hover { background: var(--band); color: var(--sage-deep); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-right: -8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; } .nav-toggle span + span { margin-top: 6px; } /* ========================================================================== Home ========================================================================== */ .hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 110px); } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 6% 12%, var(--peach) 0%, transparent 62%), radial-gradient(circle at 99% 2%, var(--peach) 0%, transparent 62%), radial-gradient(circle at 4% 90%, var(--peach) 0%, transparent 55%), radial-gradient(circle at 95% 92%, var(--peach) 0%, transparent 46%); opacity: .85; } .hero__inner { position: relative; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: clamp(28px, 5vw, 64px); } .hero__title { font-family: var(--font-hero); font-weight: 700; font-size: clamp(42px, 5.9vw, 72px); line-height: 1.08; letter-spacing: -0.02em; color: var(--sage); margin-bottom: 36px; } .hero__lede { font-family: var(--font-serif); font-size: clamp(19px, 2.2vw, 28px); line-height: 1.78; margin: 0; /* 555px is what makes this wrap as the original does at desktop: "...creative thinker. I / turn questions into insights and insights / into thoughtful design." Measured, not guessed - a ch-based width drifts because ch scales with the font size. */ max-width: min(100%, 555px); } .hero__lede strong { color: var(--sage-deep); font-weight: 400; } .blob { position: relative; width: min(100%, 360px); margin-inline: auto; aspect-ratio: 1 / 0.98; } .blob__ring, .blob img { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: url(#blob-shape); } .blob__ring { background: var(--sage); transform: scale(1.07) rotate(-5deg); } .blob img { object-fit: cover; } .shape-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .section-pad { padding-block: clamp(38px, 5vw, 66px); } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(34px, 4.5vw, 60px) clamp(24px, 3vw, 40px); } .project-card { text-decoration: none; display: flex; flex-direction: column; } .project-card__media { aspect-ratio: 368/444; overflow: hidden; background: var(--band); } .project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .project-card:hover .project-card__media img { transform: scale(1.04); } /* Wix draws a hairline above each caption */ .project-card__cap { border-top: 1px solid var(--ink); margin-top: 18px; padding-top: 14px; } .project-card__title { font-family: var(--font-body); font-weight: 700; font-size: 20px; color: var(--ink-soft); } .project-card:hover .project-card__title { color: var(--sage-deep); } .project-card__sub { font-family: var(--font-value); font-size: 16px; color: var(--muted); margin-top: 5px; } /* ========================================================================== Project page furniture ========================================================================== */ /* Photographic banner, optionally with a logo laid over it */ .banner { position: relative; width: 100%; height: clamp(190px, 30vw, 400px); overflow: hidden; background: var(--band); } .banner__photo { width: 100%; height: 100%; object-fit: cover; } /* Southwest fades its banner photo back so the logo reads on top of it */ .banner--wash .banner__photo { opacity: .42; } .banner--wash { background: #fff; } .banner__mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(46%, 600px); height: auto; object-fit: contain; } .banner--flat .banner__mark { width: min(40%, 512px); } /* Photo banner carrying the page title, with a scrim so the words stay legible */ .banner--title { height: clamp(240px, 36vw, 460px); } .banner--title::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.42) 100%); } .banner__title { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; padding-inline: var(--gutter); color: #fff; } .banner__title h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 4.9vw, 60px); line-height: 1.08; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0,0,0,.35); } .banner__title small { display: block; font-family: var(--font-head); font-weight: 400; font-size: clamp(22px, 3.3vw, 46px); margin-top: 8px; text-shadow: 0 2px 18px rgba(0,0,0,.35); } /* Venmo-style hero: artwork on one side, a solid colour title card on the other */ .hero-split { display: grid; grid-template-columns: 0.78fr 1.22fr; align-items: center; gap: clamp(20px, 3vw, 44px); padding-block: clamp(26px, 4vw, 54px); } .title-card { background: var(--accent); border-radius: 22px; min-height: clamp(170px, 24vw, 320px); display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); } .title-card h1 { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -0.02em; text-align: center; } /* Flat colour banner (Indigo purple) with graphics bleeding off both edges */ .banner--flat { background: var(--banner-bg, var(--band)); height: clamp(210px, 29vw, 373px); } .banner__edge { position: absolute; top: 50%; width: clamp(120px, 21.7vw, 278px); height: auto; } .banner__edge--l { left: 0; transform: translate(-18%,-50%); } .banner__edge--r { right: 0; transform: translate(18%,-50%) scaleX(-1); } /* Coloured header band (Teaching English mint, Rendering blue) */ .band { background: var(--band-bg, var(--band)); padding-block: clamp(40px, 6vw, 76px); position: relative; } .band--wave { padding-bottom: clamp(64px, 9vw, 120px); } .band--wave::after { /* the scalloped bottom edge on Rendering */ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 4vw, 56px); background: var(--bg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V26c60-22 120-22 180 0s120 22 180 0 120-26 180-4 120 30 180 8 120-30 180-8 120 26 180 4 120-22 180 0v34z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V26c60-22 120-22 180 0s120 22 180 0 120-26 180-4 120 30 180 8 120-30 180-8 120 26 180 4 120-22 180 0v34z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/100% 100%; } .page-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(36px, 4.9vw, 60px); line-height: 1.08; letter-spacing: -0.02em; color: var(--accent); } .page-title--center { text-align: center; } .page-title small { display: block; font-family: var(--font-head); font-weight: 400; font-size: clamp(24px, 3.5vw, 50px); color: var(--ink); margin-top: 6px; letter-spacing: -0.01em; } .page-title--standalone { margin-block: clamp(28px, 3.4vw, 42px) 0; } .page-title--sm { font-size: clamp(29px, 3.4vw, 44px); } .rule { width: 96px; height: 1px; background: var(--ink); border: 0; margin: 18px 0; } .rule--center { margin-inline: auto; } /* ROLE / DATE / SKILLS / PRACTICES on its cream strip */ .meta-band { background: var(--band); } .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px 34px; margin: 0; padding-block: clamp(26px, 3.4vw, 40px); border-top: 1px solid var(--line); } .meta dt { font-family: var(--font-label); font-size: 13px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--label); margin-bottom: 10px; } .meta dd { margin: 0; font-family: var(--font-value); font-style: italic; font-size: 15px; line-height: 1.55; color: var(--muted); } .section-head { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 3.9vw, 50px); line-height: 1.12; letter-spacing: -0.015em; color: var(--accent); margin-block: clamp(30px, 3.6vw, 48px) 16px; } .section-head--right { text-align: right; } .section-head--center { text-align: center; } .section-head--italic { font-style: italic; } .lede { font-size: clamp(15px, 1.35vw, 17px); line-height: 1.65; max-width: 66ch; margin: 0 0 10px; } .lede--right { margin-left: auto; text-align: right; } /* Body copy is not one size across the site — each page was measured off the Wix original and set to what it actually uses. The --lg rules are written at the same specificity as the page rules and placed after them, so the modifier wins. */ body.t-venmo .lede { font-size: clamp(16px, 1.5vw, 18px); } /* 18px */ body.t-southwest .lede { font-size: clamp(16px, 1.5vw, 18px); } /* 18px */ body.t-indigo .lede { font-size: clamp(17px, 1.65vw, 20px); } /* 20px */ body .lede.lede--lg { font-size: clamp(17px, 1.7vw, 20px); } /* 20px */ body.t-indigo .lede.lede--lg { font-size: clamp(19px, 1.95vw, 24px); } /* 24px */ .lede--center { margin-inline: auto; text-align: center; } .lede strong { font-weight: 700; } figure { margin: clamp(20px, 2.6vw, 32px) 0; } figcaption { font-family: var(--font-body); font-size: 16px; color: var(--muted); margin-top: 12px; } .figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(18px, 2.6vw, 32px); align-items: end; margin-block: clamp(20px, 2.6vw, 32px); } .figure-row figure { margin: 0; } /* Luv footprint trail used as a section divider */ .divider { display: block; width: clamp(130px, 17vw, 240px); margin-block: clamp(26px, 3.4vw, 44px) 0; } .divider--l { margin-inline: 0 auto; } .divider--r { margin-inline: auto 0; } .brandmark { width: min(280px, 62%); } .mascot { width: clamp(46px, 5vw, 62px); } /* Image beside text, sides swappable */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3.2vw, 44px); align-items: center; margin-block: clamp(22px, 3vw, 38px); } .split img { width: 100%; } .split__media--first { order: -1; } /* Half-bleed image: runs to the page edge on one side */ .halfbleed { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; } .halfbleed--text-right { grid-template-columns: 0.86fr 1.14fr; } .halfbleed--text-left { grid-template-columns: 1.14fr 0.86fr; } .halfbleed > img { width: 100%; height: 100%; object-fit: cover; } .halfbleed__text { padding-inline: clamp(20px, 3.2vw, 44px); } /* Bullets that alternate left / right alignment, as in Teaching English */ .stagger { list-style: none; margin: 0; padding: 0; } .stagger li { font-size: clamp(15px, 1.35vw, 17px); line-height: 1.5; margin-bottom: 26px; position: relative; } .stagger li::before { content: "•"; margin-right: 10px; } .stagger li:nth-child(even) { text-align: right; } .stagger li:nth-child(even)::before { content: ""; margin: 0; } .stagger li:nth-child(even)::after { content: "•"; margin-left: 10px; } /* Justified gallery: uniform height, natural widths — how Wix lays these out */ .justified { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, .9vw, 10px); } .justified img, .justified video { height: clamp(140px, 18vw, 238px); width: auto; max-width: 100%; object-fit: cover; flex: 0 1 auto; transition: transform .35s cubic-bezier(.2,.7,.3,1); } .justified img:hover, .justified video:hover { transform: scale(0.965); } .justified--tall { gap: clamp(16px, 3.2vw, 40px); } .justified--tall img, .justified--tall video { height: clamp(210px, 29vw, 443px); } /* The clip is 16:9, but the still it replaced was 1254x886. Pin the video to that same box so the gallery keeps its original proportions, and let object-fit crop the extra width rather than widening the tile. */ .justified video.gallery-video { aspect-ratio: 1254 / 886; width: auto; } /* Horizontal scrolling gallery — Indigo's Featured Events and the KeyShot renders */ .scroller { display: flex; gap: clamp(8px, 1.2vw, 14px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: 14px; scrollbar-width: thin; } .scroller img { height: clamp(180px, 24vw, 300px); width: auto; max-width: none; object-fit: cover; flex: 0 0 auto; scroll-snap-align: start; cursor: zoom-in; transition: transform .35s cubic-bezier(.2,.7,.3,1); } .scroller img:hover { transform: scale(0.965); } .scroller::-webkit-scrollbar { height: 8px; } .scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .scroller::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Click-to-enlarge overlay */ .lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(12, 14, 16, .92); display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); } .lightbox[data-open="true"] { display: flex; } .lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .lightbox__close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; padding: 6px 10px; } .lightbox__close:hover { opacity: .7; } .bleed img { width: 100%; height: clamp(160px, 28vw, 385px); object-fit: cover; } /* ========================================================================== About ========================================================================== */ .about-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 2vw, 24px); margin-block: clamp(38px, 5.5vw, 62px) 30px; } .about-head h1 { font-family: var(--font-head); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -0.01em; } .about-head img { width: clamp(96px, 11vw, 131px); } .prose { max-width: 810px; margin-inline: auto; font-size: 16px; line-height: 1.7; } .prose p { margin: 0 0 1.35em; } /* Wix's Resume control is a small outlined chip, not a filled pill */ .btn { display: inline-block; font-family: var(--font-btn); font-size: 13px; text-decoration: none; color: var(--ink); border: 1px solid var(--ink); padding: 6px 14px; transition: background .2s ease, color .2s ease; } .btn::after { content: " \203A"; } .btn:hover { background: var(--ink); color: #fff; } .center { text-align: center; } /* ========================================================================== Contact form — Wix uses Futura LT and underline-only fields ========================================================================== */ .contact { padding-bottom: clamp(50px, 7vw, 84px); } .contact h2 { font-family: var(--font-form); font-weight: 700; font-size: clamp(26px, 3.2vw, 30px); margin-bottom: 30px; /* share the form's column so the heading centres over the fields, not over the full page width */ max-width: 490px; margin-inline: auto; text-align: center; } .form { max-width: 490px; margin-inline: auto; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .form label { display: block; font-family: var(--font-form); font-size: 14px; color: var(--ink); margin-bottom: 4px; } .form input, .form textarea { width: 100%; font-family: var(--font-form); font-size: 15px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 8px 2px; } .form input:focus, .form textarea:focus { outline: 0; border-bottom-color: var(--sage); border-bottom-width: 2px; } .form textarea { min-height: 108px; resize: vertical; } .form__field { margin-bottom: 26px; } .form button { font-family: var(--font-form); font-size: 15px; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 0; padding: 9px 26px; cursor: pointer; transition: background .2s ease, color .2s ease; } .form button:hover { background: var(--ink); color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .notice { padding-block: clamp(80px, 16vh, 180px); text-align: center; } .notice h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(32px, 5vw, 54px); color: var(--sage); margin-bottom: 18px; } .notice p { margin: 0 0 26px; } /* ========================================================================== Footer ========================================================================== */ .site-footer { padding-block: 44px; text-align: center; } .site-footer a { font-family: var(--font-body); font-size: 14px; text-decoration: none; } .site-footer a:hover { color: var(--sage-deep); } .site-footer p { font-family: var(--font-body); font-size: 14px; margin: 6px 0 0; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 860px) { .hero__inner, .split, .halfbleed { grid-template-columns: 1fr; } .hero__lede { max-width: 34ch; } .blob { width: min(70%, 303px); margin-top: 6px; } .split__media--first { order: 0; } .halfbleed__text { padding-inline: 0; } .section-head--right, .lede--right { text-align: left; margin-left: 0; } .divider--l, .divider--r { margin-inline: auto; } .stagger li:nth-child(even) { text-align: left; } .stagger li:nth-child(even)::before { content: "•"; margin-right: 10px; } .stagger li:nth-child(even)::after { content: ""; margin: 0; } .nav-toggle { display: block; } .nav { position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 4px; background: #fff; border-bottom: 1px solid var(--line); padding: 14px var(--gutter) 24px; display: none; } .nav[data-open="true"] { display: flex; } .nav a, .nav__trigger { font-size: 17px; padding-block: 8px; } .nav__group { width: 100%; } .nav__menu { position: static; transform: none; opacity: 1; visibility: visible; border: 0; box-shadow: none; background: none; padding: 0 0 0 14px; min-width: 0; display: none; } .nav__menu[data-open="true"] { display: block; transform: none; } .nav__group:hover .nav__menu { transform: none; } .nav__menu a { padding: 7px 0; font-size: 16px; } } @media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } .meta { gap: 18px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }