/* =========================================================================== DHANYA NAMBIAR — Design System Concept: soft yet powerful. A cream-and-gold editorial world pulled from her media kit — delicate gold hummingbird, high-contrast serif, generous air — made credible for the web. Fonts loaded via in (no @import). ======================================================================== */ :root { /* --- palette: warm paper, ink, and a single gold accent --- */ --cream: #F7F3ED; /* dominant field */ --paper: #FBF9F4; /* lifted panels */ --sand: #EFE7D9; /* soft alt band */ --sand-deep: #E5D9C5; --ink: #2B2521; /* body — warmer than black */ --ink-2: #4A4139; --ink-soft: #837767; --gold: #C79A3B; /* kit gold */ --gold-deep: #A9812C; --gold-soft: #E4C878; --gold-line: rgba(199,154,59,.34); --gold-wash: rgba(199,154,59,.07); --charcoal: #171310; /* dark break */ --charcoal-2: #241d17; --maxw: 1200px; --wide: 1340px; --gutter: clamp(1.25rem, 5vw, 4.5rem); --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Jost', system-ui, -apple-system, sans-serif; --ease: cubic-bezier(.22, 1, .36, 1); --ease-soft: cubic-bezier(.16, .8, .28, 1); /* gentler, for reveals */ --shadow: 0 30px 70px -40px rgba(43,37,33,.45); --shadow-soft: 0 20px 50px -35px rgba(43,37,33,.35); } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); background: var(--cream); color: var(--ink); font-weight: 300; line-height: 1.7; overflow-x: hidden; font-size: clamp(1rem, .55vw + .9rem, 1.075rem); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* film grain, barely there, unifies the palette */ body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .028; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- layout ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--wide); } section { position: relative; } .pad { padding-block: clamp(4.5rem, 11vh, 9rem); } .pad-t { padding-top: clamp(4.5rem, 11vh, 9rem); } /* ---------- typography ---------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -.005em; color: var(--ink); } .display { font-size: clamp(2.9rem, 7.4vw, 6.1rem); font-weight: 300; line-height: .98; letter-spacing: -.015em; } .h2 { font-size: clamp(2rem, 4.4vw, 3.35rem); font-weight: 300; line-height: 1.04; } .h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 400; } .serif-it { font-style: italic; } em, .em { font-style: italic; } /* eyebrow / kicker */ .kicker { font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: .8em; } .kicker::before { content: ""; width: 2.2em; height: 1px; background: var(--gold); opacity: .7; } .kicker--center { justify-content: center; } .kicker--plain::before { display: none; } @media (max-width: 540px){ .kicker { letter-spacing: .24em; } } .lead { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.6; color: var(--ink-2); font-weight: 300; } .muted { color: var(--ink-soft); } .script { font-family: var(--serif); font-style: italic; color: var(--gold-deep); font-weight: 400; } /* gold hairline divider with hummingbird, echoing the kit's gold bars */ .rule { display: flex; align-items: center; justify-content: center; gap: 1.2rem; } .rule::before, .rule::after { content: ""; height: 1px; flex: 1; max-width: 160px; background: linear-gradient(90deg, transparent, var(--gold-line)); } .rule::after { background: linear-gradient(90deg, var(--gold-line), transparent); } .rule img { width: 30px; height: auto; opacity: .9; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: var(--sans); font-weight: 500; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; padding: 1.05em 2.1em; border-radius: 100px; cursor: pointer; border: 1px solid transparent; transition: all .5s var(--ease); white-space: nowrap; } .btn--gold { background: var(--gold); color: #fff; box-shadow: 0 14px 30px -14px rgba(169,129,44,.7); } .btn--gold:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(169,129,44,.85); } .btn--ghost { border-color: var(--gold-line); color: var(--ink); background: transparent; } .btn--ghost:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-wash); } .btn--light { border-color: rgba(255,255,255,.35); color: #fff; } .btn--light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); } .btn--sm { padding: .8em 1.5em; font-size: .74rem; } .link-arrow { display: inline-flex; align-items: center; gap: .5em; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--gold-deep); transition: gap .4s var(--ease); } .link-arrow:hover { gap: .85em; } .link-arrow svg { width: 1em; height: 1em; } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); transition: all .5s var(--ease); } .nav.scrolled { background: rgba(247,243,237,.82); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--gold-line); padding-block: .75rem; } .brand { display: flex; align-items: center; gap: .7rem; } .brand img { width: 30px; height: auto; } .brand .name { font-family: var(--serif); font-size: 1.12rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; } .brand .name b { font-weight: 600; } .nav-links { display: flex; align-items: center; gap: 2.1rem; } .nav-links a.n { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--ink-2); transition: color .3s; } .nav-links a.n:hover { color: var(--gold-deep); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; } .nav-toggle span { width: 24px; height: 1.5px; background: var(--ink); transition: all .4s var(--ease); } @media (max-width: 900px) { .nav-links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 2rem; background: rgba(247,243,237,.97); backdrop-filter: blur(10px); transform: translateY(-100%); transition: transform .55s var(--ease); } .nav-links.open { transform: translateY(0); } .nav-links a.n { font-size: 1rem; } .nav-toggle { display: flex; z-index: 101; } .nav-toggle.open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2){ opacity: 0; } .nav-toggle.open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); } } /* ---------- hero ---------- */ .hero { position: relative; padding-top: clamp(7rem, 16vh, 10rem); padding-bottom: clamp(3rem, 8vh, 6rem); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 85% 0%, var(--gold-wash), transparent 55%), linear-gradient(180deg, var(--paper), var(--cream) 70%); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .hero-copy .kicker { margin-bottom: 1.6rem; } .hero h1 { margin-bottom: 1.5rem; } .hero h1 .script { display: block; font-size: .92em; } .hero-copy .lead { max-width: 34ch; margin-bottom: 2.3rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; } .hero-media { position: relative; } .hero-media .frame { position: relative; border-radius: 260px 260px 8px 8px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 464/620; } .hero-media .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; } .hero-media::after { content: ""; position: absolute; inset: -10px; border: 1px solid var(--gold-line); border-radius: 270px 270px 12px 12px; z-index: -1; } .hero-hb { position: absolute; top: -34px; right: -6px; width: 74px; opacity: .92; transform: rotate(6deg); } .hero-scroll { margin-top: 3.2rem; display: inline-flex; align-items: center; gap: .7rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); } .hero-scroll .dot { width: 26px; height: 40px; border: 1px solid var(--gold-line); border-radius: 20px; position: relative; } .hero-scroll .dot::after { content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 7px; border-radius: 3px; background: var(--gold); transform: translateX(-50%); animation: scroll 1.8s var(--ease) infinite; } @keyframes scroll { 0%{opacity:0; transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0; transform:translate(-50%,12px)} } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .hero-media { max-width: 380px; margin-inline: auto; order: -1; } .hero-copy { text-align: center; } .hero-copy .kicker { justify-content: center; } .hero-copy .lead { margin-inline: auto; } .hero-cta { justify-content: center; } } /* ---------- footer ---------- */ .footer { background: var(--charcoal); color: rgba(247,243,237,.7); padding-block: clamp(3.5rem, 8vh, 6rem); text-align: center; } .footer .hb { width: 54px; margin: 0 auto 1.4rem; opacity: .95; } .footer .mantra { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--gold-soft); margin-bottom: 2rem; font-weight: 400; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 2.2rem; margin-bottom: 2rem; font-size: .82rem; letter-spacing: .1em; } .footer-links a { color: rgba(247,243,237,.75); transition: color .3s; display: inline-flex; align-items: center; gap: .5em; } .footer-links a:hover { color: var(--gold-soft); } .footer-fine { font-size: .74rem; letter-spacing: .06em; color: rgba(247,243,237,.4); line-height: 1.9; } .footer-fine a { color: rgba(247,243,237,.6); } /* ---------- reveal-on-scroll (soft, slow fade-up with a whisper of blur) ---------- */ .reveal { opacity: 0; transform: translateY(18px); filter: blur(2px); transition: opacity 1.5s var(--ease-soft), transform 1.5s var(--ease-soft), filter 1.1s var(--ease-soft); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; filter: none; } .reveal.d1 { transition-delay: .12s; } .reveal.d2 { transition-delay: .24s; } .reveal.d3 { transition-delay: .36s; } .reveal.d4 { transition-delay: .48s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; transition: none; } .hero-scroll .dot::after { animation: none; } } /* Lenis smooth-scroll hooks */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* floating whatsapp */ .wa-float { position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(37,211,102,.6); transition: transform .4s var(--ease); } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 30px; height: 30px; fill: #fff; }