/* ========================================================================== ABOUT PAGE — v2 editorial regeneration ========================================================================== Conceptual shift from Home: no color-block section alternation. Every section stays on --color-paper; differentiation comes from chapter marks, soft washes, and oversized background type — the way pages of one book feel continuous, not the way landing-page sections feel like separate blocks. Reuses layout.css primitives throughout; nothing structural (containers, grid, spacing scale) is redefined here. ========================================================================== */ /* ------------------------------------------------------------------------ PAGE TEXTURE — barely-there paper grain Scoped to . Fixed overlay, pointer-events none, ~2.5% opacity. Built from an inline SVG fractal-noise filter — no image asset, no request, no dependency. ------------------------------------------------------------------------ */ .page-about { position: relative; } /* .page-about .site-nav { background: linear-gradient(135deg, rgba(12, 9, 14, 0.24) 0%, rgba(24, 16, 24, 0.12) 100%); border-bottom-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: fixed; left: 0; right: 0; top: 0; width: 100%; } */ .page-about::before { content: ''; position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; opacity: 0.025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------------ CHAPTER MARK — recurring "book chapter" device Replaces hard section-background transitions as the rhythm-carrier. Used at the top of every section except the Hero (the Hero is the threshold/arrival, not a numbered chapter). ------------------------------------------------------------------------ */ .chapter-mark { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); } .chapter-mark__line { width: 2rem; height: 1px; background-color: var(--color-line-strong); flex-shrink: 0; } .chapter-mark__label { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-faint); } /* ------------------------------------------------------------------------ BACKGROUND WORD — oversized, near-invisible type behind a section Purely atmospheric. aria-hidden in markup; decorative only. ------------------------------------------------------------------------ */ .bg-word { position: absolute; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: clamp(6rem, 4rem + 12vw, 15rem); line-height: 1; color: #fff; opacity: 0.035; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; @media (max-width: 767px) { font-size: 6rem; } } /* ------------------------------------------------------------------------ WASH — soft blurred organic warmth behind selected content Built from a blurred radial shape, not a drawn/geometric icon — reads as "warm light," matching the same principle used on Home's Finale. ------------------------------------------------------------------------ */ .wash { position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none; z-index: 0; } .wash--blush { background-color: var(--color-blush); opacity: 0.6; } .wash--gold { background-color: var(--color-gold-tint); opacity: 0.5; } /* ------------------------------------------------------------------------ SHARED SECTION TREATMENT Light plum gradient wash for the hero-like sections, keeping the page feeling continuous rather than cut into hard blocks. ------------------------------------------------------------------------ */ .about-hero, .about-reflections, .about-closing { position: relative; overflow: hidden; isolation: isolate; } .about-hero::before, .about-reflections::before, .about-closing::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .about-hero > .container, .about-reflections > .container, .about-closing > .container { position: relative; z-index: 1; } .about-reflections h2 { color: var(--color-gold); } /* ------------------------------------------------------------------------ SECTION 1 — HERO ------------------------------------------------------------------------ */ .about-hero { position: relative; overflow: hidden; padding-block: var(--space-9); isolation: isolate; background: linear-gradient( 0deg, #2c1732 0%, #290924 68%, #3d1a39 100% ); @media (min-width: 1024px) { padding-block: var(--space-10); } @media (max-width: 767px) { padding-block: var(--space-7); } } .about-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(184, 147, 90, 0.08) 0%, rgba(184, 147, 90, 0.02) 45%, transparent 100%); z-index: 0; pointer-events: none; } .about-hero::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.035; pointer-events: none; z-index: 0; } .about-hero__bg-word { top: -9rem; left: +6rem; } @media (max-width: 767px) { .about-hero__bg-word { top: 1rem; left: +0rem; } } .about-hero__grid { position: relative; z-index: 1; display: grid; gap: var(--space-8); align-items: center; } @media (min-width: 1024px) { .about-hero__grid { grid-template-columns: 3fr 2fr; gap: var(--space-9); } } .about-hero__headline { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); max-width: 16ch; color: var(--color-blush); } .about-hero__body { margin-top: var(--space-6); } /* ---- Portrait: layered paper-card treatment ---- An offset blush card sits behind the photo, peeking from the bottom corner — a classic editorial layered-frame, built with a pseudo- element, no extra image. */ .about-hero__portrait-wrap { position: relative; } .about-hero__portrait-wrap::before { content: ""; position: absolute; inset: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4); background: linear-gradient( 135deg, rgba(106, 73, 102, 0.24) 0%, rgba(185, 151, 138, 0.18) 55%, rgba(248, 239, 232, 0.12) 100% ); border-radius: var(--radius-lg); z-index: 0; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30), 0 6px 18px rgba(59, 33, 56, 0.18); } .about-hero__portrait-image { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(15%); border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 24px 50px rgba(59, 33, 56, 0.16); opacity: 0.85; } .about-hero__caption { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-line-strong); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-faint); line-height: var(--leading-normal); } /* ------------------------------------------------------------------------ SECTION 2 — THE QUESTIONS THAT CHANGED ME ------------------------------------------------------------------------ */ .about-story { position: relative; overflow: hidden; padding-block: var(--space-9); @media (max-width: 767px) { padding-block: var(--space-9); } } @media (min-width: 1024px) { .about-story { padding-block: var(--space-10); } } .about-story h2 { color: var(--color-gold-deep); } .about-story__bg-word { top: 50%; right: -1rem; transform: translateY(-50%); } .about-story__grid { position: relative; z-index: 1; display: grid; gap: var(--space-8); } @media (min-width: 1024px) { .about-story__grid { grid-template-columns: 2fr 1fr; gap: var(--space-9); } } .about-story__quote { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-7) var(--space-5); margin: var(--space-6) 0; } .about-story__quote-wash { width: 25rem; height: 25rem; top: 50%; left: 50%; transform: translate(-50%, -50%); @media (max-width: 767px) { width: 18rem; height: 15rem; } } /* Editorial pull-quote mark — oversized glyph, gold, low opacity, positioned behind the quote text itself. */ .about-story__quote::before { content: '\201C'; position: absolute; top: -1.5rem; left: 0.5rem; font-family: var(--font-display); font-size: 7rem; line-height: 1; color: #fff; opacity: 0.3; z-index: 0; } .about-story__quote-text { position: relative; z-index: 1; font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); line-height: var(--leading-snug); color: #3d1a39; max-width: 24ch; text-align: left; } /* ------------------------------------------------------------------------ SECTION 3 — WHAT MY JOURNEY CONTINUES TO TEACH ME v2: journal-column treatment (thin vertical rules between items) replaces boxed cards — reads as pages divided, not products compared. ------------------------------------------------------------------------ */ .about-reflections { padding-block: var(--space-9); } @media (max-width: 767px) { .about-reflections { padding-block: var(--space-9); background: linear-gradient( 180deg, #3d1a39 0%, #2c1732 100% );} } @media (min-width: 1024px) { .about-reflections { padding-block: var(--space-10); } } .about-reflections__intro { margin-bottom: var(--space-9); } .reflection-grid { display: grid; gap: var(--space-7); } @media (min-width: 768px) { .reflection-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } } .reflection-card { padding: var(--space-6); border: 1px solid rgba(111, 91, 107, 1); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35); } .reflection-card:hover { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(255, 255, 255, 0.35); } @media (min-width: 768px) { .reflection-card { padding: var(--space-6); } } .reflection-card__number { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-regular); color: var(--color-line-strong); line-height: 1; margin-bottom: var(--space-4); } @media (max-width: 768px) { .reflection-card__number { font-size: var(--text-3xl); } } .reflection-card__tag { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-faint); margin-top: var(--space-2); } .reflection-card__heading { font-size: var(--text-md); margin-bottom: var(--space-3); max-width: 22ch; } @media (max-width: 768px) { .reflection-card__heading { font-size: var(--text-md); } } .reflection-card__body p { color: var(--color-ink-soft); } @media (max-width: 768px) { .reflection-card__body p { font-size: var(--text-sm); } } .reflection-card__body p + p { margin-top: var(--space-2); } /* ------------------------------------------------------------------------ SECTION 4 — WHAT YOU CAN EXPECT FROM ME Split into an intro column and a tighter right-hand list, keeping the section feeling calmer and more editorial rather than overly tall. ------------------------------------------------------------------------ */ .principles { padding-block: var(--space-7); } @media (min-width: 1024px) { .principles { padding-block: clamp(var(--space-9), 3vw, var(--space-8)); } } .principles__layout { display: grid; gap: var(--space-7); } @media (min-width: 900px) { .principles__layout { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; gap: clamp(var(--space-6), 3.5vw, var(--space-10)); } } .principles__intro { max-width: 38rem; } .principles__intro p { margin-top: var(--space-5); opacity: 0.85; } .principles__eyebrow { margin-bottom: var(--space-3); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-gold); } .principles__list { display: grid; } @media (min-width: 900px) { .principles__list { position: relative; padding-left: clamp(var(--space-4), 2vw, var(--space-6)); } .principles__list::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--color-line), transparent); } } .principle { display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--color-line); } .principle:first-child { border-top: none; padding-top: 0; } @media (min-width: 768px) { .principle { grid-template-columns: 5.5rem 1fr; gap: var(--space-5); padding-block: var(--space-4); } } .principle__number { font-family: var(--font-display); font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem); font-weight: var(--weight-regular); color: var(--color-line-strong); opacity: 0.85; line-height: 1; } .principle__heading { margin-bottom: var(--space-2); max-width: 30ch; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem); } .principle__body p { color: var(--color-ink-soft); line-height: var(--leading-normal); } .principle__body p + p { margin-top: var(--space-1); } /* ------------------------------------------------------------------------ SECTION 5 — CLOSING Reuses .chapter-mark instead of its own one-off mark — one consistent device across the whole page. ------------------------------------------------------------------------ */ .about-closing { position: relative; overflow: hidden; padding-block: var(--space-9); background: linear-gradient( 0deg, #1a111d 0%, #290924 55%, #3d1a39 100% ); } .closing-cta { position: relative; overflow: hidden; /* grain ko section ke bounds tak seemit rakhne ke liye */ } .closing-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,\ "); background-repeat: repeat; } .about-closing__bg-word { top: 50%; left: 50%; transform: translate(-50%, -50%); } .about-closing__inner { position: relative; z-index: 1; text-align: center; } .about-closing .chapter-mark { justify-content: center; } .about-closing__heading { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); font-weight: var(--weight-regular); line-height: var(--leading-snug); max-width: 32ch; margin-inline: auto; color: var(--color-gold); } .about-closing .prose { text-align: center; max-width: 40ch; margin-inline: auto; } .about-closing .prose > p { margin-top: var(--space-3); } .about-closing__cta { margin-top: var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .link--quieter { color: #fff; text-decoration: underline; transition: var(--transition-color); } .link--quieter:hover { color: #96733e; }