/* ==================================================================== Ella Nguyen — Portfolio Warm, soft-editorial system. Parchment base + serif display. Accent / hero / texture / motion / font driven by data-attrs on . ==================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Warm paper base (shared across all accent moods) */ --bg: #F6F2EA; --bg-2: #F0EADF; --surface: #FCFAF5; --surface-2: #F2ECE1; --border: rgba(48, 38, 26, 0.10); --border-mid:rgba(48, 38, 26, 0.16); /* Accent mood — overridden per data-accent. Default: softened indigo */ --ink: #1d2440; --ink-2: #3b4156; --ink-3: #5b6072; --ink-4: #8a8e9c; --ink-5: #b6b9c4; --accent: #3a4fbf; --accent-deep: #28306e; --accent-soft: #d8d3ef; --accent-faint: #ece9f7; --serif: 'Instrument Serif', Georgia, serif; --sans: 'Bricolage Grotesque', system-ui, sans-serif; /* Display font swaps via --display */ --display: var(--serif); --nav-h: 4.25rem; --maxw: 1180px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ── Accent moods ─────────────────────────────────────────────── */ html[data-accent="indigo"] { --ink: #1d2440; --ink-2:#3b4156; --ink-3:#5b6072; --ink-4:#8a8e9c; --ink-5:#b6b9c4; --accent:#3a4fbf; --accent-deep:#28306e; --accent-soft:#d8d3ef; --accent-faint:#ece9f7; } html[data-accent="terracotta"] { --ink:#2c2420; --ink-2:#4a3f38; --ink-3:#6b5d52; --ink-4:#9a8b7e; --ink-5:#c7bbac; --accent:#bd6240; --accent-deep:#823f27; --accent-soft:#ecd5c6; --accent-faint:#f4e6dc; } html[data-accent="sage"] { --ink:#222a25; --ink-2:#3c463e; --ink-3:#5a655b; --ink-4:#8a9389; --ink-5:#bcc2bb; --accent:#4f7a5d; --accent-deep:#2f4d39; --accent-soft:#d2e0d3; --accent-faint:#e6eee5; } html[data-display="sans"] { --display: var(--sans); } html { scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; } /* Page texture overlay */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s; } html[data-texture="dots"] body::before { opacity: 1; background-image: radial-gradient(rgba(48,38,26,0.10) 1px, transparent 1.4px); background-size: 22px 22px; } html[data-texture="grid"] body::before { opacity: 1; background-image: linear-gradient(rgba(48,38,26,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(48,38,26,0.055) 1px, transparent 1px); background-size: 40px 40px; } a { color: inherit; } img { display: block; max-width: 100%; } /* Image placeholder — swap for a real once the asset is ready */ .img-slot { position: relative; overflow: hidden; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; padding: 0.75rem; box-sizing: border-box; background: rgba(0,0,0,0.04); color: var(--ink-4); } .img-slot::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1.5px dashed var(--border-mid); border-radius: inherit; } .img-slot svg { opacity: 0.4; } .img-slot span { max-width: 90%; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 2.25rem; position: relative; z-index: 1; } /* ── NAV ───────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 84%, transparent); border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s; } .nav.scrolled { border-bottom-color: var(--border); } .nav-inner { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); padding: 0 2.25rem; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); display: inline-flex; align-items: baseline; gap: 0.1rem; } .nav-logo .dot { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 2rem; } .nav-links { display: flex; gap: 1.75rem; list-style: none; align-items: center; } .nav-links a { font-size: 0.82rem; color: var(--ink-3); text-decoration: none; letter-spacing: 0.01em; position: relative; padding: 0.2rem 0; transition: color 0.2s; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px; background: var(--accent); transition: right 0.28s var(--ease); } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .nav-links a.active::after, .nav-links a:hover::after { right: 0; } /* Buttons */ .btn { font-family: var(--sans); cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 100px; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; transition: transform 0.18s var(--ease), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; } .btn-primary { background: var(--accent); color: #fff; padding: 0.62rem 1.3rem; font-size: 0.86rem; font-weight: 500; box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-deep) 60%, transparent); } .btn-primary:hover { background: var(--accent-deep); } .btn-lg { padding: 0.92rem 1.9rem; font-size: 0.95rem; } .btn-ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--border-mid); padding: 0.9rem 1.7rem; font-size: 0.95rem; font-weight: 400; } .btn-ghost:hover { border-color: var(--accent); color: var(--ink); } .btn .arrow { transition: transform 0.2s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ── HERO ──────────────────────────────────────────────────────── */ .hero { padding: calc(var(--nav-h) + 3.5rem) 0 4.5rem; } .hero-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; } html[data-hero="split"] .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); } html[data-hero="centered"] .hero-copy { text-align: center; align-items: center; } html[data-hero="centered"] .hero-portrait { display: none; } html[data-hero="centered"] .hero-actions, html[data-hero="centered"] .hero-socials, html[data-hero="centered"] .hero-now { justify-content: center; } html[data-hero="centered"] .hero-copy { margin: 0 auto; max-width: 760px; } .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; min-width: 0; } .hero-now { display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; font-size: 0.78rem; color: var(--ink-3); padding: 0.36rem 0.85rem 0.36rem 0.7rem; border: 1px solid var(--border); border-radius: 100px; background: color-mix(in srgb, var(--surface) 70%, transparent); } .hero-now .now-label { color: var(--ink-2); font-weight: 500; } .hero-now .live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } html[data-motion="on"] .hero-now .live { animation: ping 2.4s var(--ease) infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%,100% { box-shadow: 0 0 0 7px transparent; } } .hero-now .ticker { display: inline-grid; height: 1.1em; overflow: hidden; } .hero-now .ticker b { font-weight: 600; color: var(--ink); grid-area: 1/1; white-space: nowrap; opacity: 0; transform: translateY(0.6em); transition: opacity 0.5s, transform 0.5s var(--ease); } .hero-now .ticker b.show { opacity: 1; transform: none; } .hero-head { display: flex; flex-direction: column; gap: 0.5rem; } h1.hero-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.9rem, 6.4vw, 5.2rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--ink); } h1.hero-title .nm { white-space: nowrap; } html[data-display="sans"] h1.hero-title { font-weight: 500; letter-spacing: -0.03em; } h1.hero-title .wave { display: inline-block; transform-origin: 70% 70%; } html[data-motion="on"] h1.hero-title .wave { animation: wave 2.6s ease-in-out 1 0.4s; } @keyframes wave { 0%,100%{transform:rotate(0)} 15%{transform:rotate(16deg)} 30%{transform:rotate(-9deg)} 45%{transform:rotate(13deg)} 60%{transform:rotate(-5deg)} 75%{transform:rotate(8deg)} } h1.hero-title .accent { color: var(--accent); font-style: italic; } .hero-tag { font-family: var(--display); font-size: clamp(1.45rem, 2.9vw, 2.2rem); line-height: 1.14; color: var(--ink-3); font-style: italic; text-wrap: balance; } html[data-display="sans"] .hero-tag { font-style: normal; font-weight: 400; } .hero-desc { font-size: 1.06rem; font-weight: 300; color: var(--ink-3); max-width: 38rem; line-height: 1.7; } .hero-desc + .hero-desc { margin-top: -0.6rem; } .hero-desc strong { font-weight: 500; color: var(--ink-2); } .hero-desc .mark { color: var(--ink-2); font-weight: 400; background: linear-gradient(transparent 62%, var(--accent-soft) 62%); padding: 0 0.1em; } .hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.25rem; } .hero-socials { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; padding-top: 1.6rem; margin-top: 0.4rem; border-top: 1px solid var(--border); width: 100%; } .social { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--ink-4); text-decoration: none; transition: color 0.2s; } .social svg { width: 15px; height: 15px; opacity: 0.7; transition: transform 0.2s var(--ease); } .social:hover { color: var(--accent); } .social:hover svg { transform: translateY(-2px); } /* Hero portrait (split layout) */ .hero-portrait { position: relative; justify-self: end; width: 100%; max-width: 340px; } .hero-portrait .frame { position: relative; border-radius: 20px; overflow: visible; } .hero-portrait image-slot { width: 100%; aspect-ratio: 4/5; border: 1px solid var(--border-mid); box-shadow: 0 24px 50px -28px rgba(40,32,22,0.45); } .hero-portrait .blob { position: absolute; inset: -5% -5% auto auto; width: 46%; aspect-ratio: 1; background: var(--accent-soft); border-radius: 46% 54% 60% 40%/52% 44% 56% 48%; z-index: -1; filter: blur(1px); opacity: 0.85; } html[data-motion="on"] .hero-portrait .blob { animation: float 9s ease-in-out infinite; } @keyframes float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(6deg)} } .hero-portrait .chip { position: absolute; bottom: -0.8rem; left: -0.8rem; white-space: nowrap; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem 0.8rem; font-size: 0.74rem; color: var(--ink-3); box-shadow: 0 10px 24px -16px rgba(40,32,22,0.5); display: inline-flex; align-items: center; gap: 0.35rem; } .hero-portrait .chip b { font-weight: 600; color: var(--ink); } /* ── SKY HERO (full-bleed illustration · Option A) ───────────── */ .sky-hero { position: relative; z-index: 1; width: 100%; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #2f63b4; isolation: isolate; } .sky-hero__bg { position: absolute; inset: 0; z-index: 0; background: url('kites-hero.png') 50% 64% / cover no-repeat; } .sky-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,42,96,0.5) 0%, rgba(18,42,96,0.16) 30%, rgba(18,42,96,0.1) 60%, rgba(18,42,96,0.16) 100%), rgba(20, 30, 80, 0.15); } .sky-hero__inner { position: relative; z-index: 2; width: 100%; } .sky-hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; max-width: 720px; margin: 0 auto; padding: var(--nav-h) 0 0; } .sky-status { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; padding: 0.4rem 0.95rem; border-radius: 100px; font-size: 0.8rem; font-weight: 500; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.42); color: #fff; backdrop-filter: blur(6px); } .sky-status__dot { width: 8px; height: 8px; border-radius: 50%; background: #74e39b; box-shadow: 0 0 0 0 rgba(116,227,155,0.5); } html[data-motion="on"] .sky-status__dot { animation: ping 2.4s var(--ease) infinite; } .sky-head { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; } .sky-title { font-family: var(--display); font-weight: 400; color: #fff; font-size: clamp(2.7rem, 5.6vw, 4.9rem); line-height: 1.14; letter-spacing: -0.015em; text-shadow: 0 3px 34px rgba(12,30,72,0.34); } .sky-title .nm { white-space: nowrap; } html[data-display="sans"] .sky-title { font-weight: 500; letter-spacing: -0.03em; } .sky-title .sky-accent { font-style: italic; color: #f8bcd6; } .sky-title .wave { display: inline-block; transform-origin: 70% 70%; } html[data-motion="on"] .sky-title .wave { animation: wave 2.6s ease-in-out 1 0.5s; } .sky-tag { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.32; color: rgba(255,255,255,0.95); text-shadow: 0 2px 22px rgba(12,30,72,0.3); } html[data-display="sans"] .sky-tag { font-style: normal; font-weight: 400; } .sky-desc { font-size: 1.06rem; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,0.93); max-width: 35rem; text-shadow: 0 1px 16px rgba(12,30,72,0.45); } .sky-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; margin-top: 0.25rem; } .btn-cream { font-family: var(--sans); cursor: pointer; border: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; background: #fdf7f0; color: #1d3f86; font-weight: 600; font-size: 0.95rem; padding: 0.92rem 1.9rem; border-radius: 100px; box-shadow: 0 14px 32px rgba(12,30,72,0.26); transition: transform 0.18s var(--ease), background 0.2s; } .btn-cream:hover { transform: translateY(-1px); background: #fff; } .btn-cream .arrow { transition: transform 0.2s var(--ease); } .btn-cream:hover .arrow { transform: translateX(3px); } .btn-cream:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .btn-glass { font-family: var(--sans); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; background: rgba(255,255,255,0.14); color: #fff; font-size: 0.95rem; font-weight: 500; padding: 0.9rem 1.7rem; border-radius: 100px; text-decoration: none; border: 1px solid rgba(255,255,255,0.55); backdrop-filter: blur(4px); transition: background 0.2s; } .btn-glass:hover { background: rgba(255,255,255,0.24); } .btn-glass:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .sky-socials { display: flex; gap: 1.4rem; flex-wrap: nowrap; align-items: center; justify-content: center; margin-top: 0.65rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.3); width: 100%; } .sky-social { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; font-size: 0.84rem; color: rgba(255,255,255,0.86); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; } .sky-social svg { width: 15px; height: 15px; opacity: 0.85; } .sky-social:hover { color: #fff; } /* Nav over the sky hero (transparent → parchment on scroll) */ .nav:not(.scrolled) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; } .nav:not(.scrolled) .nav-logo { color: #fff; text-shadow: 0 1px 14px rgba(12,30,72,0.4); } .nav:not(.scrolled) .nav-logo .dot { color: #f8bcd6; } .nav:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.9); text-shadow: 0 1px 12px rgba(12,30,72,0.45); } .nav:not(.scrolled) .nav-links a:hover, .nav:not(.scrolled) .nav-links a.active { color: #fff; } .nav:not(.scrolled) .nav-links a::after { background: #fff; } .nav:not(.scrolled) .btn-primary { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.5); color: #fff; backdrop-filter: blur(6px); box-shadow: none; } .nav:not(.scrolled) .btn-primary:hover { background: rgba(255,255,255,0.28); } /* Cursor spotlight */ .spotlight { position: fixed; pointer-events: none; z-index: 0; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 68%); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.4s; mix-blend-mode: multiply; } html[data-motion="on"] .spotlight.on { opacity: 0.7; } /* ── SECTION SCAFFOLD ──────────────────────────────────────────── */ .section { padding: 4.5rem 0; } .section-head { margin-bottom: 2.6rem; max-width: 56rem; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; } .eyebrow::before { content: ''; width: 22px; height: 1.5px; background: var(--accent); opacity: 0.6; } h2.section-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.05rem, 3.6vw, 2.8rem); line-height: 1.22; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; } html[data-display="sans"] h2.section-title { font-weight: 500; letter-spacing: -0.025em; } h2.section-title em { font-style: italic; color: var(--accent); } .section-sub { margin-top: 1.2rem; font-size: 1rem; font-weight: 300; color: var(--ink-3); max-width: 34rem; line-height: 1.65; } /* ── FEATURED PROJECTS ─────────────────────────────────────────── */ .featured { display: flex; flex-direction: column; gap: 2.75rem; } .feat:not(:first-child) { border-top: 1px solid var(--border-mid); padding-top: 2.75rem; } .feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; } .feat:nth-child(even) .feat-media { order: -1; } .feat-media { position: relative; } .feat-media .img-slot, .feat-media img { width: 100%; aspect-ratio: 4/3; border: 1px solid var(--border-mid); border-radius: 16px; box-shadow: 0 30px 60px -40px rgba(40,32,22,0.5); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .feat-media img { object-fit: cover; } .feat:hover .feat-media .img-slot, .feat:hover .feat-media img { box-shadow: 0 40px 70px -38px rgba(40,32,22,0.55); } html[data-motion="on"] .feat:hover .feat-media .img-slot, html[data-motion="on"] .feat:hover .feat-media img { transform: translateY(-4px); } .feat-index { position: absolute; top: -1.5rem; left: -0.4rem; z-index: 2; font-family: var(--display); font-style: italic; font-size: 2.7rem; color: var(--accent); opacity: 0.92; line-height: 1; pointer-events: none; } .feat-body { min-width: 0; } .feat-kicker { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; font-size: 0.74rem; color: var(--ink-4); letter-spacing: 0.02em; } .feat-kicker .num { font-family: var(--display); font-style: italic; color: var(--ink-3); } .feat-kicker .pill { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); background: var(--accent-faint); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 100px; padding: 0.18rem 0.55rem; } h3.feat-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.14; color: var(--ink); margin-bottom: 0.7rem; letter-spacing: -0.01em; text-wrap: balance; } html[data-display="sans"] h3.feat-title { font-weight: 500; letter-spacing: -0.02em; } .feat-desc { font-size: 0.96rem; font-weight: 300; color: var(--ink-3); line-height: 1.72; max-width: 32rem; margin-bottom: 1.3rem; } .feat-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.5rem; } .tag { font-size: 0.68rem; font-weight: 400; letter-spacing: 0.04em; white-space: nowrap; color: var(--ink-3); border: 1px solid var(--border-mid); border-radius: 100px; padding: 0.28rem 0.7rem; } .feat-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 500; color: var(--ink); text-decoration: none; padding-bottom: 2px; border-bottom: 1.5px solid var(--accent); transition: gap 0.2s var(--ease), color 0.2s; } .feat-cta:hover { gap: 0.85rem; color: var(--accent); } .feat-cta .arrow { transition: transform 0.2s var(--ease); } /* ── OTHER PROJECTS (interactive index) ────────────────────────── */ .other-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .idx-list { list-style: none; border-top: 1px solid var(--border); } .idx-item { border-bottom: 1px solid var(--border); } .idx-row { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: baseline; gap: 1.1rem; padding: 1.15rem 0.4rem; text-align: left; font-family: var(--sans); color: var(--ink-3); transition: color 0.25s, padding 0.3s var(--ease); } .idx-row .idx-num { font-family: var(--display); font-style: italic; font-size: 0.9rem; color: var(--ink-5); width: 1.6rem; flex-shrink: 0; transition: color 0.25s; } .idx-row .idx-name { flex: 1; min-width: 0; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.12; color: var(--ink-3); transition: color 0.25s; letter-spacing: -0.005em; } .idx-row .idx-meta { margin-left: auto; font-size: 0.72rem; color: var(--ink-4); letter-spacing: 0.04em; text-transform: uppercase; align-self: center; opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s var(--ease); } .idx-item.active .idx-row { padding-left: 1.1rem; } .idx-item.active .idx-row .idx-name { color: var(--ink); } .idx-item.active .idx-row .idx-num { color: var(--accent); } .idx-item.active .idx-row .idx-meta { opacity: 1; transform: none; color: var(--accent); } .idx-row:hover .idx-name { color: var(--ink); } /* Detail panel */ .idx-detail { position: sticky; top: calc(var(--nav-h) + 1.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.9rem; min-height: 16rem; box-shadow: 0 30px 60px -50px rgba(40,32,22,0.6); display: flex; flex-direction: column; } .idx-detail .d-num { font-family: var(--display); font-style: italic; font-size: 0.85rem; color: var(--accent); margin-bottom: 0.7rem; } .idx-detail .d-title { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; color: var(--ink); margin-bottom: 0.8rem; letter-spacing: -0.01em; } html[data-display="sans"] .idx-detail .d-title { font-weight: 500; letter-spacing:-0.02em; } .idx-detail .d-desc { font-size: 0.92rem; font-weight: 300; color: var(--ink-3); line-height: 1.72; flex: 1; } .idx-detail .d-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.4rem; } /* transform-only entrance so content is never left blank in static captures */ .d-panel { animation: fadeUp 0.4s var(--ease); } @keyframes fadeUp { from { transform: translateY(10px); } to { transform: none; } } /* ── CONTACT ───────────────────────────────────────────────────── */ .contact { padding: 4.5rem 0 5.5rem; } .contact-card { position: relative; overflow: hidden; background: #2f63b4 url('kites-hero.png') 50% 40% / cover no-repeat; border: 1px solid rgba(255,255,255,0.22); border-radius: 26px; padding: clamp(3rem, 6vw, 4.75rem); min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .contact-card::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(18,42,96,0.5) 0%, rgba(18,42,96,0.4) 100%); } .contact-copy { position: relative; z-index: 1; } .contact-copy h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.16; color: #fff; margin-bottom: 1rem; letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 2px 22px rgba(12,30,72,0.35); } html[data-display="sans"] .contact-copy h2 { font-weight: 500; letter-spacing:-0.025em; } .contact-copy h2 em { font-style: italic; color: #f8bcd6; } .contact-copy p { font-size: 1.02rem; font-weight: 300; color: rgba(255,255,255,0.93); line-height: 1.7; max-width: 32rem; margin: 0 auto 1.7rem; text-shadow: 0 1px 14px rgba(12,30,72,0.4); } .contact-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; justify-content: center; } .contact-art { position: relative; z-index: 1; justify-self: center; width: 100%; max-width: 320px; } .contact-art image-slot { width: 100%; aspect-ratio: 3/4; } .contact-art .blob { position: absolute; inset: 6% -6% auto auto; width: 70%; aspect-ratio: 1; background: var(--accent-soft); border-radius: 52% 48% 44% 56%/46% 56% 44% 54%; z-index: -1; opacity: 0.8; } /* ── FOOTER ────────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--border); padding: 2rem 0; } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 2.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; } .footer-name { font-family: var(--display); font-size: 1.25rem; color: var(--ink-2); } .footer-name .dot { color: var(--accent); } .footer-meta { font-size: 0.78rem; color: var(--ink-4); } .footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer-links a { font-size: 0.82rem; color: var(--ink-4); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--accent); } /* ── CONTACT MODAL ─────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; visibility: hidden; pointer-events: none; } .modal.open { visibility: visible; pointer-events: auto; } .modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 30%, transparent); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.25s; } .modal.open .modal-backdrop { opacity: 1; } .modal-panel { position: relative; z-index: 1; width: min(560px, 100%); background: #E6CDEE; border: 1px solid var(--border-mid); border-radius: 24px; padding: clamp(2rem, 4vw, 2.75rem); box-shadow: 0 40px 90px -40px rgba(40,32,22,0.6); display: grid; grid-template-columns: 0.55fr 1fr; gap: 1.75rem; align-items: center; opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 0.25s, transform 0.25s var(--ease); } .modal.open .modal-panel { opacity: 1; transform: none; } .modal-art .img-slot, .modal-art img { width: 100%; aspect-ratio: 3/4; border-radius: 16px; object-fit: cover; } .modal-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 34px; height: 34px; border: none; border-radius: 10px; cursor: pointer; font-size: 1.1rem; line-height: 1; background: var(--surface-2); color: var(--ink-2); transition: background 0.2s; } .modal-close:hover { background: var(--border); } .modal-body h2 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; color: var(--ink); margin-bottom: 0.7rem; } .modal-body p { font-size: 0.92rem; font-weight: 300; color: var(--ink-3); line-height: 1.65; margin-bottom: 1.3rem; } .modal-links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .modal-links li { font-size: 0.88rem; color: var(--ink-3); display: flex; gap: 0.4rem; } .modal-links .lbl { color: var(--ink-4); } .modal-links a { color: var(--accent); font-weight: 500; text-decoration: none; } .modal-links a:hover { color: var(--accent-deep); } /* ── REVEAL ────────────────────────────────────────────────────── */ /* Base = visible (survives no-JS, print, paused-paint screenshots). JS adds .pending to below-the-fold items; IO removes it to animate them in. */ .reveal { opacity: 1; transform: none; } html[data-motion="on"] .reveal.pending { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.pending { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-portrait .blob, .hero-now .live, h1.hero-title .wave { animation: none !important; } } /* ── RESPONSIVE ────────────────────────────────────────────────── */ @media (max-width: 880px) { .wrap { padding: 0 1.4rem; } .nav-inner { padding: 0 1.4rem; } .nav-links { display: none; } .sky-hero { min-height: 100vh; min-height: 100svh; } .sky-hero__bg { background-position: 54% 42%; } .sky-hero__content { padding: calc(var(--nav-h) + 1.5rem) 0 2.5rem; gap: 1.15rem; max-width: 100%; } .sky-hero__scrim { background: linear-gradient(180deg, rgba(18,42,96,0.58) 0%, rgba(18,42,96,0.3) 45%, rgba(18,42,96,0.2) 100%), rgba(20, 30, 80, 0.15); } .sky-desc { font-size: 1rem; } .sky-socials { gap: 1.15rem; flex-wrap: wrap; row-gap: 0.85rem; } .feat { grid-template-columns: 1fr; gap: 1.5rem; } .feat:nth-child(even) .feat-media { order: 0; } .feat-index { top: -0.8rem; } .other-layout { grid-template-columns: 1fr; } .idx-detail { position: static; order: -1; } .contact-card { grid-template-columns: 1fr; } .contact-art { display: none; } .modal-panel { grid-template-columns: 1fr; } .modal-art { display: none; } .footer-inner { padding: 0 1.4rem; justify-content: center; text-align: center; } } @media (max-width: 560px) { .nav-inner { height: 3.85rem; } .sky-title { font-size: clamp(2.3rem, 11vw, 3rem); } .sky-tag { font-size: clamp(1.2rem, 5.6vw, 1.55rem); } .sky-desc { font-size: 0.96rem; } .sky-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 0.65rem; } .sky-actions .btn-cream, .sky-actions .btn-glass { width: 100%; justify-content: center; } .sky-socials { gap: 0.9rem; } .sky-social { font-size: 0.8rem; gap: 0.3rem; } .sky-social svg { display: none; } .section { padding: 3.25rem 0; } .contact-actions { width: 100%; flex-direction: column; align-items: stretch; } .contact-actions .btn { width: 100%; justify-content: center; } .footer-inner { flex-direction: column; gap: 0.85rem; } }