/* ========================================================= Envision Studios — design tokens & global styles ========================================================= */ :root { /* Colors */ --pink-accent: #f3a9b0; --pink-accent-soft: #f5b8be; --pink-card: #fbe3e6; --pink-card-soft: #fdeef0; --pink-tint: #fdf4f5; --pink-border: #f0a8ae; --pink-button: #fbd5d9; --pink-button-hover: #f5c3c8; --gray-panel: #f4f4f4; --gray-panel-soft: #f7f7f7; --text: #1a1a1a; --text-soft: #444; --text-muted: #888; --white: #ffffff; --divider: #e5e5e5; /* Fonts — Young Serif (display), Inter (body), Geist (UI/nav/buttons) */ --font-serif: 'Young Serif', 'Georgia', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-ui: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Type scale */ --text-xl: 64px; /* display titles — hero, case study titles */ --text-lg: 30px; /* section titles, emphasis statements */ --text-md: 20px; /* eyebrows, hero subtitle, project captions */ --text-sm: 14px; /* body copy, small serif text */ --text-ui: 16px; /* nav tabs, buttons, UI labels (Geist) */ /* Layout */ --content-max: 1100px; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 28px; /* Vertical rhythm — unified breathing room between sections. Override per-breakpoint in the responsive section. */ --section-py: 110px; --nav-h: 56px; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Section anchors land below the fixed nav rather than under it. */ scroll-padding-top: 96px; /* White lives on so can be transparent. That lets the fixed petals layer (z-index: -1) be visible between the page background and the body content. */ background: var(--white); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.55; color: var(--text); background: transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul, ol { padding-left: 1.2em; } .container { max-width: var(--content-max); margin: 0 auto; padding: 0 28px; } /* ========================================================= Wordmark + Navbar — both fixed so they stay visible while scrolling ========================================================= */ .wordmark { position: fixed; top: 22px; left: 28px; font-family: var(--font-serif); font-size: var(--text-sm); line-height: 1.15; font-weight: 600; letter-spacing: 0.01em; z-index: 20; } .wordmark span { display: block; } .nav { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 20; background: rgba(255,255,255,0.78); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-radius: 999px; padding: 4px; display: inline-flex; box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04); } .nav a { font-family: var(--font-ui); font-size: var(--text-ui); padding: 8px 22px; border-radius: 999px; color: var(--text); transition: background 0.22s ease, color 0.22s ease; } .nav a:hover { background: rgba(243,169,176,0.18); } .nav a.active { background: var(--pink-card); color: var(--text); } /* When nav is on a non-hero page, swap to dark text */ .nav--solid { background: rgba(255,255,255,0.95); } /* ========================================================= Buttons ========================================================= */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border-radius: 999px; background: var(--pink-button); color: var(--text); border: 1px solid transparent; font-family: var(--font-ui); font-size: var(--text-ui); transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .btn:hover { background: var(--pink-button-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(243, 169, 176, 0.28); } .btn:active { transform: translateY(0); box-shadow: none; } .btn--ghost { background: transparent; border-color: var(--pink-border); } .btn--ghost:hover { background: var(--pink-card-soft); } .btn svg { width: 14px; height: 14px; } /* ========================================================= Section labels (eyebrow + pink serif title) ========================================================= */ .eyebrow { font-family: var(--font-serif); font-size: var(--text-md); color: var(--text); margin: 0 0 6px; font-weight: 600; } .section-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-lg); line-height: 1.15; color: var(--pink-accent); margin: 0 0 28px; } .section-title--right { text-align: right; } /* ========================================================= Homepage — Hero ========================================================= */ .hero { position: relative; min-height: 720px; padding: 0; overflow: hidden; /* Default placeholder: blue sky fading into soft pink — swap by setting --hero-bg via the assets manifest. */ background: var(--hero-bg, linear-gradient(180deg, #bcdcef 0%, #c9def0 25%, #e0d3e2 55%, #f3d9da 80%, #fbe9ea 100% )); background-size: cover; background-position: center; } /* Soft pink glow blending the top corners with the sky. Hidden when a real photo background is in place (it already has its own art). */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(245,184,190,0.55), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 0%, rgba(245,184,190,0.55), transparent 70%); pointer-events: none; } .hero.hero--has-bg::before { display: none; } .hero.hero--has-bg { background-color: var(--white); } /* Decorative SVG sakura branches anchored in each top corner */ .hero__sakura { position: absolute; top: 0; width: 46%; max-width: 540px; pointer-events: none; z-index: 2; } .hero__sakura--left { left: 0; } .hero__sakura--right { right: 0; transform: scaleX(-1); } .hero__sakura svg { width: 100%; height: auto; display: block; } .hero__inner { position: relative; z-index: 3; max-width: var(--content-max); margin: 0 auto; padding: 280px 28px 100px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; } .hero__title { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-xl); line-height: 1.05; color: rgba(243,169,176,0.95); margin: 0 0 18px; } .hero__sub { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-md); line-height: 1.4; color: var(--text); max-width: 360px; margin: 0 0 24px; } .hero__buttons { display: flex; gap: 10px; } .hero__portrait { justify-self: end; align-self: center; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, #fbe3e6 0%, #fdeef0 100%); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .hero__portrait img { width: 100%; height: 100%; object-fit: cover; } /* Petals — fixed to the viewport so they keep falling across the whole page as the user scrolls. z-index: -1 places them behind body content (text, cards, images) but in front of the html background. */ .petals { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .petal { position: absolute; width: 14px; height: 14px; background: radial-gradient(circle at 30% 30%, #ffd3d8 0%, #f3a9b0 70%, #e98c95 100%); border-radius: 80% 20% 80% 20% / 60% 40% 60% 40%; opacity: 0.85; top: -20px; will-change: transform; animation: petal-fall linear infinite; } @keyframes petal-fall { 0% { transform: translate3d(0,-20px,0) rotate(0deg); } 100% { transform: translate3d(40px, calc(100vh + 40px), 0) rotate(720deg); } } @media (prefers-reduced-motion: reduce) { .petal { animation: none; display: none; } } /* ========================================================= Homepage — About ========================================================= */ .about { padding: var(--section-py) 0; } .about__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; } .about__photo { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-panel); } .about__photo img { width: 100%; height: 100%; object-fit: cover; } .about__body p:not(.eyebrow):not(.section-title) { margin: 0 0 14px; color: var(--text); font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.65; } /* ========================================================= Homepage — Projects ========================================================= */ .projects { padding: var(--section-py) 0; } .projects__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; } .project-card { background: var(--pink-card); border-radius: var(--radius-lg); padding: 36px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 2px 14px rgba(243, 169, 176, 0.12); transition: transform 0.35s ease, box-shadow 0.35s ease; will-change: transform; } .project-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(243, 169, 176, 0.22); } .project-card__panel { background: var(--white); border-radius: var(--radius-md); width: 100%; aspect-ratio: 5 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .project-card__logo { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-lg); color: var(--text); } /* Per-project font overrides for the card wordmark, matching each project's own brand identity. */ .project-card__logo--relief { font-family: 'DM Serif Display', 'Young Serif', Georgia, serif; font-weight: 600; } .project-card__logo--gradly { font-family: 'Fraunces', 'Young Serif', Georgia, serif; font-weight: 600; } .project-card__logo .dot { color: var(--pink-accent); } .project-card__caption { margin-top: 18px; font-family: var(--font-serif); font-weight: 600; font-size: var(--text-sm); color: var(--text); } /* ========================================================= Homepage — Toolkit ========================================================= */ .toolkit { padding: var(--section-py) 0; } .toolkit__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; } .toolkit__visual { background: var(--pink-card); border-radius: var(--radius-md); aspect-ratio: 1 / 1; padding: 30px; position: relative; overflow: hidden; } .tool-icon { position: absolute; width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,0.06); font-weight: 600; font-size: 12px; } .tool-icon img, .tool-icon svg { width: 70%; height: 70%; } .tool-blob { position: absolute; width: 60px; height: 60px; border-radius: 14px; background: var(--pink-accent-soft); opacity: 0.55; } .toolkit__list { list-style: none; padding: 0; margin: 0; } .toolkit__row { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); gap: 24px; } .toolkit__row:last-child { border-bottom: 0; } .toolkit__label { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-lg); } .toolkit__detail { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-soft); text-align: right; } /* ========================================================= Homepage — Things I like ========================================================= */ .likes { padding: var(--section-py) 0; } .likes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; } .likes__card { display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform 0.32s ease; } .likes__card:hover { transform: translateY(-4px); } .likes__photo { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-panel); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); transition: box-shadow 0.32s ease; } .likes__card:hover .likes__photo { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10); } .likes__photo img { width: 100%; height: 100%; object-fit: cover; } .likes__caption { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text); } /* ========================================================= Footer ========================================================= */ .footer { padding: calc(var(--section-py) * 0.7) 0 calc(var(--section-py) * 0.8); text-align: center; } .footer__text { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-lg); color: var(--pink-accent); } /* ========================================================= Case-study pages ========================================================= */ .cs-wrap { padding-top: 80px; } .cs-header { position: relative; padding: 30px 0 0; } .cs-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-ui); color: var(--text); margin: 60px 0 30px; } .cs-back:hover { color: var(--pink-accent); } .cs-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-xl); line-height: 1.05; margin: 0 0 28px; } .cs-title .dot { color: var(--pink-accent); } /* Gradly-specific dot color (matches Gradly's lilac accent in the design). Compound selectors to beat the default .project-card__logo .dot and .cs-title .dot rules. */ .project-card__logo .dot--gradly, .cs-title .dot--gradly { color: #C2A1C4; } .cs-hero { background: var(--gray-panel); border-radius: var(--radius-md); padding: 36px; margin-bottom: 50px; } .cs-hero--grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cs-hero--grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; } .phone-frame { background: var(--white); border-radius: 18px; aspect-ratio: 9 / 19; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 11px; text-align: center; padding: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .web-frame { background: var(--white); border-radius: 12px; aspect-ratio: 5 / 4; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; text-align: center; padding: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } /* When a real mockup image is dropped in, fill the frame edge-to-edge. */ .phone-frame:has(img), .web-frame:has(img) { padding: 0; } .phone-frame img, .web-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .cs-section { margin: 50px 0; } .cs-section h3.cs-eyebrow { font-family: var(--font-sans); font-size: var(--text-sm); text-transform: lowercase; color: var(--text); font-weight: 400; margin: 0 0 16px; } .cs-statement { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: var(--text-lg); line-height: 1.25; margin: 0 0 20px; } .cs-body p { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.65; color: var(--text); margin: 0 0 14px; max-width: 760px; } .cs-body ol { padding-left: 22px; margin: 0 0 14px; } .cs-body ol li { font-family: var(--font-sans); margin-bottom: 8px; font-size: var(--text-sm); max-width: 720px; } .cs-feature { margin: 60px 0; } .cs-feature__num { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); margin-bottom: 10px; } .cs-feature__lead { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.65; margin-bottom: 22px; max-width: 760px; } .cs-feature__tail { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.65; margin-top: 20px; max-width: 760px; } .cs-feature__container { background: var(--gray-panel); border-radius: var(--radius-md); padding: 28px; } .cs-feature__container.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .cs-feature__container.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cs-feature__container.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* ========================================================= Case study pages — all bolded/display serif text uses DM Serif Display. Scoped to `.cs-wrap` so the home page keeps Young Serif / Fraunces / DM Serif Display per-card. ========================================================= */ .cs-wrap .wordmark, .cs-wrap .cs-title, .cs-wrap .cs-statement, .cs-wrap .footer__text { font-family: 'DM Serif Display', 'Young Serif', Georgia, serif; font-weight: 600; } /* Gradly case study title uses Fraunces to match the home page card. */ .cs-wrap .cs-title--gradly { font-family: 'Fraunces', 'Young Serif', Georgia, serif; } /* ========================================================= Reveal on scroll ========================================================= */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================= Responsive ========================================================= */ @media (max-width: 880px) { :root { --section-py: 72px; --text-xl: 44px; --text-lg: 26px; --text-md: 18px; } .hero__inner { grid-template-columns: 1fr; padding-top: 160px; } .hero__portrait { justify-self: center; max-width: 320px; } .about__grid { grid-template-columns: 1fr; gap: 30px; } .projects__grid { grid-template-columns: 1fr; } .toolkit__grid { grid-template-columns: 1fr; } .toolkit__visual { aspect-ratio: 4 / 3; } .likes__grid { grid-template-columns: 1fr 1fr; } .cs-hero--grid { grid-template-columns: repeat(2, 1fr); } .cs-hero--grid-2 { grid-template-columns: 1fr; } .cs-feature__container.grid-4 { grid-template-columns: 1fr 1fr; } .cs-feature__container.grid-3 { grid-template-columns: 1fr; } .cs-feature__container.grid-2 { grid-template-columns: 1fr; } .wordmark { top: 18px; left: 18px; } .nav { top: 18px; } .container { padding: 0 18px; } } @media (max-width: 480px) { :root { --text-xl: 38px; --text-lg: 24px; --text-ui: 14px; } .nav a { padding: 8px 14px; } }