/* ========================================================================== The Pen Pal Club — styles.css ========================================================================== */ /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { display: block; max-width: 100%; height: auto; } button, input { font: inherit; color: inherit; } /* --- Custom Properties --- */ :root { /* Backgrounds */ --void: #06060a; --void-blue: #08091a; --warm-dark: #140e08; --warm-mid: #2c2012; --warm-deep: #1a1208; /* Light/warm backgrounds for paper sections */ --cream: #faf3e8; --cream-mid: #f5ede0; --cream-deep: #eee4d3; /* Text */ --text-primary: #ede4d4; --text-secondary: #9a8b76; --text-ghost: #5a4e3e; --text-dark: #3a3530; --text-dark-secondary: #6b5e50; /* Accent */ --gold: #d4a853; --gold-soft: rgba(212, 168, 83, 0.15); --gold-bright: #e8bf60; /* Digital */ --screen-blue: #3b82f6; --screen-glow: rgba(59, 130, 246, 0.08); --screen-surface: #111118; --notif-bg: rgba(255, 255, 255, 0.04); /* Paper */ --paper: #faf3e8; --paper-lines: rgba(180, 200, 220, 0.25); --paper-margin: rgba(220, 100, 100, 0.2); --pencil: #3a3530; /* Crayons */ --crayon-green: #5fa55a; --crayon-yellow: #e8c840; --crayon-red: #d94f4f; --crayon-blue: #4a7fbf; /* Motion */ --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1); --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1); /* Typography */ --font-headline: 'Playfair Display', Georgia, serif; --font-body: 'Source Serif 4', Georgia, serif; --font-hand: 'Caveat', cursive; --font-accent: 'Anybody', sans-serif; } body { font-family: var(--font-body); color: var(--text-primary); background: var(--void); line-height: 1.6; overflow-x: hidden; /* Mobile touch behavior */ -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; /* prevent iOS font-boost on rotate */ overscroll-behavior-y: none; /* stop iOS pull-to-refresh bouncing the hero */ } /* NOTE: do NOT add overflow-x: hidden to . It breaks position: sticky, which the hero scroll-scrub relies on. The body's overflow-x: hidden is enough. */ /* --- Grain Overlay (fixed, pointer-events-none, CSS-only noise) --- */ body::after { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.03; background: repeating-conic-gradient(#ede4d4 0.00005%, transparent 0.0005%, transparent 0.00075%, #ede4d4 0.001%) 50% 50% / 200px 200px; mix-blend-mode: overlay; } /* --- Animation Utilities --- */ .animate-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-smooth), transform 1.0s var(--ease-smooth); } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } .animate-fade { opacity: 0; transition: opacity 0.8s var(--ease-smooth); } .animate-fade.visible { opacity: 1; } .animate-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.8s var(--ease-smooth), transform 1.0s var(--ease-smooth); } .animate-scale.visible { opacity: 1; transform: scale(1); } /* --- Navigation --- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease-smooth); background: rgba(6, 6, 10, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site-nav.visible { opacity: 1; pointer-events: auto; } /* Light section nav adjustment */ .site-nav.over-light { background: rgba(250, 243, 232, 0.6); } .site-nav.over-light .nav-logo, .site-nav.over-light .nav-links a { color: var(--text-dark-secondary); } .site-nav.over-light .nav-links a:hover { color: var(--text-dark); } .nav-logo { font-family: var(--font-hand); font-size: 18px; color: var(--text-ghost); text-decoration: none; transition: color 0.3s; } .nav-logo:hover { color: var(--text-secondary); } .nav-links { display: flex; gap: 28px; list-style: none; } .nav-links a { font-family: var(--font-accent); font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: var(--text-ghost); text-decoration: none; transition: color 0.3s; } .nav-links a:hover { color: var(--text-secondary); } .nav-links .nav-cta { color: var(--gold); border: 1px solid rgba(212, 168, 83, 0.4); padding: 6px 16px; border-radius: 6px; transition: all 0.3s; } .nav-links .nav-cta:hover { background: var(--gold); color: var(--void); } .site-nav.over-light .nav-links .nav-cta { color: var(--gold); border-color: rgba(212, 168, 83, 0.5); } .site-nav.over-light .nav-links .nav-cta:hover { background: var(--gold); color: #fff; } /* ========================================================================== SECTION 1+2: The Hero — Unified Cinematic iPhone Experience ========================================================================== */ .section-hero { height: 500vh; position: relative; background: #000; } .hero-sticky { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: #000; z-index: 0; } /* Headline — two swappable lines above the phone */ .hero-headline { position: relative; z-index: 10; text-align: center; padding: 5vh 20px 0; flex-shrink: 0; min-height: 3.5em; } .hero-line { font-family: var(--font-headline); font-weight: 400; font-size: clamp(20px, 3vw, 36px); color: rgba(255, 255, 255, 0.5); line-height: 1.5; transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth); } .hero-line span { color: #fff; font-weight: 700; } .hero-line-1 { /* No animation — JS controls opacity for scroll swap */ } .hero-line-2, .hero-line-3 { position: absolute; top: 5vh; left: 0; right: 0; opacity: 0; transform: translateY(10px); } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* iPhone Video — fills remaining viewport below headline */ .hero-phone { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2vh 0; transition: transform 0.05s linear, opacity 0.05s linear, filter 0.05s linear; } .hero-phone img, .hero-phone video { max-height: 100%; max-width: 90vw; width: auto; height: auto; display: block; object-fit: contain; } /* Caption — unused, kept for reference */ /* Warm light glow behind video */ .hero-warm-light { position: absolute; inset: -300px; background: radial-gradient(circle at 50% 50%, rgba(212, 168, 83, 0.4) 0%, rgba(212, 168, 83, 0.15) 25%, transparent 50%); opacity: 0; z-index: 1; pointer-events: none; } /* Reveal text — the emotional payoff */ .hero-reveal-text { position: absolute; z-index: 10; text-align: center; padding: 0 20px; opacity: 0; transform: translateY(30px) scale(0.95); transition: opacity 1.2s var(--ease-smooth), transform 1.2s var(--ease-smooth); } .hero-reveal-text.visible { opacity: 1; transform: translateY(0) scale(1); } .hero-reveal-text p { font-family: var(--font-headline); font-style: italic; font-size: clamp(28px, 5.5vw, 60px); color: var(--gold); line-height: 1.3; text-shadow: 0 0 80px rgba(212, 168, 83, 0.3); } /* Camera Shake */ @keyframes cameraShake { 0%, 100% { transform: translate(0); } 10% { transform: translate(-3px, 2px); } 30% { transform: translate(2px, -3px); } 50% { transform: translate(-2px, 1px); } 70% { transform: translate(3px, -1px); } 90% { transform: translate(-1px, 2px); } } .shake { animation: cameraShake 0.4s ease; } /* ========================================================================== BRIDGE: Single connecting line between hero and story ========================================================================== */ .section-bridge { padding: 140px 20px 160px; background: linear-gradient(180deg, #000 0%, #0a0806 100%); display: flex; align-items: center; justify-content: center; text-align: center; } .bridge-line { font-family: var(--font-headline); font-style: italic; font-weight: 400; font-size: clamp(20px, 3.5vw, 36px); color: var(--text-primary); max-width: 600px; line-height: 1.5; } /* ========================================================================== SECTION 3: The Envelope — Transition to Light ========================================================================== */ .section-envelope { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #000 0%, var(--warm-dark) 40%, var(--cream) 100%); padding: 80px 0; position: relative; } .envelope-container { position: relative; width: 90vw; max-width: 900px; } .envelope-container img { width: 100%; border-radius: 4px; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4); } .envelope-container .envelope-fallback { width: 100%; aspect-ratio: 16/10; background: var(--paper); border-radius: 4px; position: relative; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4); } .envelope-flap { position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, #e8dfd0, var(--paper)); clip-path: polygon(0 0, 50% 100%, 100% 0); transform-origin: top center; transition: transform 0.8s var(--ease-smooth); } .envelope-flap.open { transform: rotateX(-180deg); } .envelope-letter-peek { position: absolute; top: 30%; left: 15%; right: 15%; height: 30%; background: var(--paper); border-radius: 2px; transform: translateY(0); transition: transform 0.6s var(--ease-smooth) 0.4s; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); } .envelope-letter-peek.peek { transform: translateY(-30px); } .envelope-caption { margin-top: 48px; font-family: var(--font-body); font-weight: 300; font-size: 16px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-secondary); } /* ========================================================================== SECTION 4: The Letter — LIGHT BACKGROUND, FULL-BLEED ========================================================================== */ .section-letter { min-height: 100dvh; padding: 120px 0 100px; background: var(--cream); position: relative; display: flex; flex-direction: column; align-items: center; } /* Video hero — full-bleed, above the letter */ .letter-video-hero { width: 100%; max-width: 1200px; margin: 0 auto 80px; position: relative; overflow: hidden; border-radius: 0; } .letter-video-hero video { width: 100%; height: auto; display: block; } .letter-video-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(transparent, var(--cream)); pointer-events: none; } .letter-video-caption { position: absolute; bottom: 40px; left: 0; right: 0; text-align: center; font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: clamp(14px, 2vw, 18px); color: var(--text-dark-secondary); z-index: 1; } /* Letter image — large and prominent */ .letter-image-container { position: relative; z-index: 1; max-width: 800px; width: 90%; transform: rotate(-1.5deg); } .letter-image-container img { width: 100%; border-radius: 2px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08); } .letter-image-container .letter-stamp { position: absolute; top: 16px; right: 20px; } /* CSS paper fallback */ .letter-paper { position: relative; z-index: 1; background: white; max-width: 700px; width: 90%; padding: 60px 80px 60px 80px; border-radius: 2px; transform: rotate(-1.5deg); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06); background-image: repeating-linear-gradient( transparent, transparent 27px, var(--paper-lines) 27px, var(--paper-lines) 28px ); } .letter-margin { position: absolute; left: 60px; top: 0; bottom: 0; width: 1px; background: var(--paper-margin); } .letter-stamp { width: 60px; height: 72px; border-radius: 2px; overflow: hidden; } .letter-stamp img { width: 100%; height: 100%; object-fit: cover; } .letter-stamp-fallback { width: 100%; height: 100%; background: #c9a96e; border: 2px dashed rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; font-family: var(--font-accent); font-size: 8px; color: rgba(0, 0, 0, 0.3); text-transform: uppercase; letter-spacing: 1px; } .letter-date { font-family: var(--font-hand); font-size: 18px; color: var(--pencil); margin-bottom: 24px; } .letter-line { font-family: var(--font-hand); font-size: clamp(18px, 2.5vw, 22px); color: var(--pencil); line-height: 28px; margin-bottom: 0; padding: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth); } .letter-line.visible { opacity: 1; transform: translateY(0); } .letter-line + .letter-line { margin-top: 0; } .letter-line.letter-gap { margin-top: 28px; } .letter-note { position: relative; z-index: 1; margin-top: 80px; padding: 0 20px; max-width: 560px; text-align: center; font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: clamp(14px, 2vw, 18px); color: var(--text-dark-secondary); line-height: 1.7; } /* ========================================================================== SECTION 5: The Drawing — LIGHT BACKGROUND, FULL-BLEED ========================================================================== */ .section-drawing { min-height: 80vh; padding: 100px 20px 120px; background: var(--cream); display: flex; flex-direction: column; align-items: center; } /* Making grid — Niam writing + Eham drawing, side by side */ .making-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); width: 100%; max-width: 1200px; align-items: start; } .making-card { margin: 0; display: flex; flex-direction: column; align-items: center; } .making-card:nth-child(1) { transform: rotate(-1deg); } .making-card:nth-child(2) { transform: rotate(1deg); } .making-photo { background: white; padding: 14px 14px 56px; border-radius: 2px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.12); width: 100%; position: relative; } .making-photo picture, .making-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1px; } .making-caption { margin-top: 20px; text-align: center; } .making-caption .name { font-family: var(--font-hand); font-size: clamp(22px, 2.4vw, 28px); color: var(--text-dark); } .making-coda { margin-top: 64px; font-family: var(--font-body); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); color: var(--text-dark-secondary); text-align: center; max-width: 480px; } /* Stack on mobile */ @media (max-width: 767px) { .making-grid { grid-template-columns: 1fr; gap: 40px; } .making-card:nth-child(1), .making-card:nth-child(2) { transform: rotate(0); } } /* ========================================================================== SECTION 6: The Reply — LIGHT BACKGROUND ========================================================================== */ .section-reply { min-height: 60vh; padding: 100px 20px 120px; background: var(--cream); display: flex; flex-direction: column; align-items: center; text-align: center; } .reply-text-above { max-width: 600px; margin-bottom: 48px; } .reply-text-above p { font-family: var(--font-headline); font-weight: 400; font-size: clamp(20px, 3.5vw, 32px); color: var(--text-dark); line-height: 1.5; } .reply-postcard { max-width: 600px; width: 85%; opacity: 0; transform: translateX(60px) rotate(1deg); transition: opacity 0.8s var(--ease-smooth), transform 1s var(--ease-smooth); } .reply-postcard.visible { opacity: 1; transform: translateX(0) rotate(1deg); } .reply-postcard img { width: 100%; border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); } .reply-text-below { margin-top: 48px; max-width: 500px; } .reply-text-below p { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 16px; color: var(--text-dark-secondary); line-height: 1.7; } /* ========================================================================== SECTION 7: The Manifesto — Back to dark ========================================================================== */ .section-manifesto { min-height: 100dvh; padding: 160px 20px; background: linear-gradient(180deg, var(--cream) 0%, var(--warm-dark) 8%, var(--warm-dark) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; } .manifesto-lines { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; } .manifesto-line { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-smooth), transform 1.0s var(--ease-smooth); } .manifesto-line.visible { opacity: 1; transform: translateY(0); } .manifesto-line.primary { font-family: var(--font-headline); font-weight: 400; font-size: clamp(22px, 4.5vw, 44px); color: var(--text-primary); margin-bottom: 80px; } .manifesto-gap { height: 120px; } .manifesto-line.secondary { font-family: var(--font-body); font-weight: 300; font-size: clamp(14px, 2vw, 18px); color: var(--text-secondary); max-width: 520px; line-height: 1.7; margin-bottom: 32px; } /* ========================================================================== SECTION 8: About ========================================================================== */ .section-about { padding: 160px 20px 120px; background: var(--warm-dark); } .about-inner { max-width: 900px; margin: 0 auto; } .section-label { font-family: var(--font-accent); font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: 4px; color: var(--text-ghost); margin-bottom: 60px; text-align: center; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .about-card { background: rgba(255, 255, 255, 0.03); border-radius: 12px; padding: 40px 32px; opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-smooth), transform 1.0s var(--ease-smooth); } .about-card.visible { opacity: 1; transform: translateY(0); } .about-photo { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; margin-bottom: 24px; } .about-photo img { width: 100%; height: 100%; object-fit: cover; } .about-photo-fallback { width: 100%; height: 100%; background: var(--warm-mid); display: flex; align-items: center; justify-content: center; font-family: var(--font-hand); font-size: 40px; color: var(--gold); } .about-name { font-family: var(--font-headline); font-size: 28px; color: var(--text-primary); margin-bottom: 4px; } .about-title { font-family: var(--font-accent); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); margin-bottom: 4px; } .about-age { font-family: var(--font-accent); font-size: 12px; color: var(--text-ghost); margin-bottom: 20px; } .about-bio { font-family: var(--font-body); font-weight: 300; font-size: 15px; color: var(--text-secondary); line-height: 1.7; } /* ========================================================================== SECTION 9: Origin Story ========================================================================== */ .section-origin { padding: 120px 20px; background: var(--warm-dark); } .origin-inner { max-width: 600px; margin: 0 auto; } .origin-text p { font-family: var(--font-body); font-weight: 400; font-size: clamp(16px, 2vw, 19px); color: var(--text-primary); line-height: 1.8; margin-bottom: 24px; } .origin-text p.niam-quote { font-family: var(--font-headline); font-style: italic; font-weight: 400; font-size: clamp(18px, 2.5vw, 24px); margin-top: 56px; margin-bottom: 56px; color: var(--text-primary); } /* ========================================================================== SECTION 10: Signup ========================================================================== */ .section-signup { min-height: 80vh; padding: 160px 20px 80px; background: var(--warm-dark); display: flex; flex-direction: column; align-items: center; text-align: center; } .signup-club-name { font-family: var(--font-hand); font-weight: 700; font-size: clamp(40px, 8vw, 72px); color: var(--gold); margin-bottom: 16px; } .signup-subtitle { font-family: var(--font-headline); font-weight: 400; font-size: clamp(16px, 2.5vw, 24px); color: var(--text-primary); margin-bottom: 12px; max-width: 500px; } .signup-pricing { font-family: var(--font-accent); font-weight: 400; font-size: 14px; color: var(--text-secondary); margin-bottom: 48px; } .signup-form { display: flex; gap: 12px; max-width: 480px; width: 100%; margin-bottom: 16px; justify-content: center; } .signup-cta { text-decoration: none; color: inherit; display: inline-block; } .signup-form input[type="email"] { flex: 1; padding: 14px 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(212, 168, 83, 0.3); border-radius: 8px; color: var(--text-primary); font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color 0.3s; } .signup-form input[type="email"]::placeholder { color: var(--text-ghost); } .signup-form input[type="email"]:focus { border-color: var(--gold); } .signup-form button { padding: 14px 28px; background: var(--gold); color: var(--void); border: none; border-radius: 8px; font-family: var(--font-body); font-weight: 500; font-size: 15px; cursor: pointer; transition: background 0.3s, transform 0.2s, box-shadow 0.3s; white-space: nowrap; } .signup-form button:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(212, 168, 83, 0.3); } .signup-form button:active { transform: translateY(0) scale(0.98); } .signup-cancel { margin-top: 14px; margin-bottom: 32px; font-family: var(--font-accent); font-weight: 300; font-size: 12px; color: var(--text-ghost); letter-spacing: 1px; text-transform: uppercase; } .signup-gift { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 16px; color: var(--text-secondary); max-width: 480px; line-height: 1.6; } .signup-fine-print { margin-top: 40px; font-family: var(--font-body); font-weight: 300; font-size: 13px; color: var(--text-ghost); max-width: 480px; line-height: 1.6; } .signup-thank-you { display: none; font-family: var(--font-headline); font-style: italic; font-size: clamp(20px, 3vw, 28px); color: var(--gold); margin-top: 20px; } .signup-thank-you.show { display: block; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1199px) { .hero-phone { max-width: 95vw; } .letter-paper, .letter-image-container { max-width: 80vw; } .drawing-frame { max-width: 80vw; } .about-grid { gap: 32px; } } @media (max-width: 767px) { /* --- Hero: phone / video — zoom into the phone on mobile --- */ .hero-phone { max-width: 100vw; width: 100vw; flex: 1 1 0; will-change: transform, opacity, filter; overflow: hidden; } .hero-phone video, .hero-phone img { width: 100%; height: 100%; object-fit: cover; /* crops the black sides, zooms into phone */ max-height: none; } /* --- Hero: headline text (was targeting wrong selector h1, fixed to .hero-line) --- */ .hero-headline { padding-top: 3vh; min-height: 2.8em; } .hero-line { font-size: clamp(18px, 5vw, 28px); /* 375px=18.75px, 428px=21.4px */ } .hero-line-2, .hero-line-3 { top: 3vh; } /* --- Hero: reveal text --- */ .hero-reveal-text p { font-size: clamp(22px, 6vw, 36px); /* 375px=22.5px, 428px=25.7px */ } /* --- Hero: warm light --- */ .hero-warm-light { will-change: opacity; } /* --- Bridge --- */ .section-bridge { padding: 80px 20px; } .bridge-line { font-size: clamp(20px, 5vw, 30px); /* readable on small screens */ } /* --- Envelope --- */ .envelope-caption { font-size: 13px; letter-spacing: 2px; margin-top: 32px; } /* --- Letter section --- */ .section-letter { padding: 80px 0 60px; } .letter-video-hero { margin-bottom: 48px; } .letter-paper { padding: 32px 24px 32px 40px; /* tighter horizontal, keep left for margin line */ max-width: 95vw; } .letter-margin { left: 28px; } .letter-line { font-size: clamp(18px, 4.5vw, 22px); /* 375px=18px, 428px=19.3px */ line-height: 1.55; /* relative instead of fixed 28px */ } .letter-line.letter-gap { margin-top: 20px; } .letter-date { font-size: 17px; margin-bottom: 18px; } .letter-image-container { max-width: 95vw; width: 95%; } .letter-note { margin-top: 48px; font-size: clamp(14px, 3.5vw, 17px); } /* --- Drawing --- */ .drawing-frame { max-width: 95vw; width: 95%; padding: 20px; } .drawing-caption .name { font-size: 22px; } .drawing-caption .desc { font-size: 15px; } /* --- Reply --- */ .section-drawing, .section-reply { padding: 80px 16px; } .reply-postcard { max-width: 95vw; width: 95%; } .reply-text-above p { font-size: clamp(18px, 5vw, 28px); } .reply-text-below p { font-size: 15px; } /* --- Manifesto --- */ .section-manifesto { padding: 80px 20px; } .manifesto-line.primary { font-size: clamp(22px, 6vw, 36px); /* 375px=22.5px */ margin-bottom: 48px; } .manifesto-line.secondary { font-size: clamp(14px, 3.5vw, 17px); } .manifesto-gap { height: 80px; } /* --- About --- */ .section-about { padding: 80px 20px; } .about-grid { grid-template-columns: 1fr; gap: 32px; } .about-card { padding: 32px 24px; } .about-name { font-size: 24px; } .about-bio { font-size: 14px; } /* --- Origin story --- */ .section-origin { padding: 80px 20px; } .origin-text p { font-size: clamp(16px, 4vw, 18px); } .origin-text p.niam-quote { font-size: clamp(18px, 4.5vw, 22px); margin-top: 40px; margin-bottom: 40px; } /* --- Signup --- */ .section-signup { padding: 80px 20px 60px; } .signup-form { flex-direction: column; } .signup-form input[type="email"] { font-size: 16px; } /* prevents iOS zoom on focus */ .signup-form button { padding: 14px 24px; font-size: 16px; } .signup-club-name { font-size: clamp(36px, 10vw, 56px); } .signup-subtitle { font-size: clamp(16px, 4vw, 22px); } /* --- Navigation --- */ .site-nav { padding: 16px 20px; } .nav-logo { font-size: 16px; } .nav-links { gap: 16px; } .nav-links a { font-size: 11px; letter-spacing: 2px; } } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .animate-on-scroll, .animate-fade, .animate-scale, .manifesto-line, .about-card, .reply-postcard, .letter-line, .notification { opacity: 1 !important; transform: none !important; } .hero-reveal-text { opacity: 1 !important; transform: none !important; } .hero-line-3 { opacity: 1 !important; transform: none !important; } .hero-line-1, .hero-line-2 { opacity: 0 !important; } .hero-phone { opacity: 0 !important; } } /* ========================================================================== Mobile Polish — refinements on top of the base mobile rules Applied on top of (max-width: 767px) above. ========================================================================== */ @media (max-width: 767px) { /* Shorter hero on mobile — same animation, less thumb scroll */ .section-hero { height: 400vh; } /* ===== Consistent vertical rhythm on mobile ===== Several sections have min-height: 100dvh on desktop, which makes them feel like full-screen chambers on mobile — visually inconsistent with sections that shrink to content. Reset on mobile and standardize padding. */ .section-envelope, .section-letter, .section-manifesto { min-height: auto; } .section-envelope { padding: 80px 20px; } .section-letter { padding: 80px 0 80px; } .section-drawing { padding: 80px 20px; } .section-reply { padding: 80px 20px; } .section-manifesto{ padding: 80px 20px; } .section-about { padding: 80px 20px; } .section-origin { padding: 80px 20px; } .section-signup { padding: 80px 20px 64px; } .section-bridge { padding: 60px 20px; } /* Letter image: smaller rotation on mobile prevents horizontal overflow */ .letter-image-container { transform: rotate(-0.8deg); width: 92%; max-width: 92vw; } /* ===== Letter video: crop the existing 16:9 video to portrait on mobile ===== No new video file. CSS object-fit handles the crop. object-position 60% shifts the visible window slightly right to keep the hand + paper centered. */ .letter-video-hero { margin-bottom: 24px; aspect-ratio: 3 / 4; width: 92%; max-width: 92vw; margin-left: auto; margin-right: auto; border-radius: 4px; overflow: hidden; } .letter-video-hero video { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; } .letter-video-hero::after { display: none; } /* drop the fade overlay on small viewport */ .letter-video-caption { position: static; margin-top: 16px; padding: 0 20px; bottom: auto; } /* About photos: keep them visible but proportionate on small phones */ .about-photo { width: 160px; height: 160px; } /* Making cards: smaller polaroid frame padding on mobile */ .making-photo { padding: 10px 10px 36px; } /* Reply postcard: reduce the initial slide-in offset (was 60px = could overshoot) */ .reply-postcard { transform: translateX(20px) rotate(1deg); } /* Signup body copy: bump readability */ .signup-gift { font-size: clamp(15px, 4.2vw, 17px); padding: 0 8px; } .signup-fine-print { font-size: clamp(13px, 3.5vw, 15px); padding: 0 8px; margin-top: 24px; } .signup-pricing { font-size: 13px; margin-bottom: 32px; } /* Nav: bigger touch target on the CTA */ .nav-links .nav-cta { padding: 8px 14px; font-size: 11px; } /* Origin: tighter quote margins so it doesn't feel airless */ .origin-text p.niam-quote { margin-top: 32px; margin-bottom: 32px; } /* Drawing/Reply sections: tighten side padding so content can breathe */ .section-drawing { padding: 80px 16px 100px; } .making-coda { margin-top: 40px; } } /* Very small phones (iPhone SE, 360px wide) — extra safety */ @media (max-width: 380px) { .about-photo { width: 140px; height: 140px; } .signup-club-name { font-size: clamp(32px, 9vw, 44px); } .nav-logo { font-size: 14px; } .nav-links { gap: 12px; } .nav-links a { font-size: 10px; letter-spacing: 1.5px; } } /* Notched devices: respect safe area insets */ @supports (padding: env(safe-area-inset-top)) { .site-nav { padding-top: max(16px, env(safe-area-inset-top)); } .section-signup { padding-bottom: max(80px, env(safe-area-inset-bottom)); } } /* ========================================================================== Footer — minimal, sits below signup section ========================================================================== */ .site-footer { background: var(--warm-dark); padding: 48px 20px 56px; border-top: 1px solid rgba(212, 168, 83, 0.08); text-align: center; } .footer-inner { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; } .footer-tagline { font-family: var(--font-hand); font-weight: 600; font-size: 22px; color: var(--gold); line-height: 1; } .footer-links { display: flex; align-items: center; gap: 14px; font-family: var(--font-accent); font-weight: 300; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .footer-links a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s; } .footer-links a:hover { color: var(--gold); } .footer-dot { color: var(--text-ghost); font-size: 14px; } .footer-copyright { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 13px; color: var(--text-ghost); } @media (max-width: 380px) { .footer-links { flex-direction: column; gap: 10px; } .footer-dot { display: none; } } /* ========================================================================== Content pages (FAQ, Privacy, Terms) Reuses brand fonts/colors. Cream background, warm-dark ink. ========================================================================== */ body.page-mode { background: var(--cream); color: var(--text-dark); } body.page-mode::after { display: none; } /* drop grain overlay on content pages */ .page-wrap { padding: 80px 24px 120px; display: flex; justify-content: center; } .page-inner { width: 100%; max-width: 720px; } .back-link { display: inline-block; margin-bottom: 56px; font-family: var(--font-hand); font-size: 20px; color: var(--text-dark-secondary); text-decoration: none; transition: color 0.3s; } .back-link:hover { color: var(--text-dark); } .page-header { margin-bottom: 72px; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 40px; } .page-eyebrow { font-family: var(--font-accent); font-weight: 400; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-dark-secondary); margin-bottom: 20px; } .page-title { font-family: var(--font-headline); font-weight: 400; font-size: clamp(28px, 4.5vw, 44px); color: var(--text-dark); line-height: 1.25; margin-bottom: 16px; } .page-meta { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 14px; color: var(--text-dark-secondary); } /* Body text */ .page-body { font-family: var(--font-body); font-size: clamp(16px, 1.8vw, 18px); line-height: 1.75; color: var(--text-dark); } .page-body p { margin-bottom: 18px; } .page-body h2 { font-family: var(--font-headline); font-weight: 400; font-size: clamp(22px, 3vw, 28px); color: var(--text-dark); margin-top: 48px; margin-bottom: 16px; line-height: 1.3; } .page-body ul { margin: 0 0 24px 24px; padding: 0; } .page-body li { margin-bottom: 10px; line-height: 1.7; } .page-body a { color: var(--text-dark); text-decoration: underline; text-decoration-color: rgba(212, 168, 83, 0.6); text-underline-offset: 3px; transition: text-decoration-color 0.3s; } .page-body a:hover { text-decoration-color: var(--gold); } .page-body strong { color: var(--text-dark); font-weight: 600; } /* FAQ accordion */ .faq-list { margin-top: 0; } .faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); padding: 24px 0; } .faq-item:first-child { padding-top: 0; } .faq-item summary { font-family: var(--font-headline); font-weight: 400; font-size: clamp(18px, 2.2vw, 22px); color: var(--text-dark); cursor: pointer; list-style: none; position: relative; padding-right: 40px; line-height: 1.4; transition: color 0.2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 0; top: 0; font-family: var(--font-body); font-size: 28px; font-weight: 300; color: var(--text-dark-secondary); transition: transform 0.3s, color 0.2s; line-height: 1; } .faq-item[open] summary::after { content: '\2013'; /* en-dash to indicate open */ color: var(--gold); } .faq-item summary:hover { color: var(--gold); } .faq-answer { margin-top: 16px; font-family: var(--font-body); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.75; color: var(--text-dark-secondary); } .faq-answer p { margin-bottom: 14px; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer a { color: var(--text-dark); } .faq-answer ul { margin: 0 0 14px 24px; padding: 0; } .faq-answer li { margin-bottom: 6px; line-height: 1.65; } /* Bottom CTA on FAQ page */ .page-cta { margin-top: 96px; padding-top: 56px; border-top: 1px solid rgba(0,0,0,0.08); text-align: center; } .page-cta p { font-family: var(--font-hand); font-size: 24px; color: var(--text-dark); margin-bottom: 20px; } .page-cta-button { display: inline-block; padding: 14px 32px; background: var(--gold); color: var(--void); border-radius: 8px; font-family: var(--font-body); font-weight: 500; font-size: 16px; text-decoration: none; transition: background 0.3s, transform 0.2s, box-shadow 0.3s; } .page-cta-button:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(212, 168, 83, 0.3); } /* Page-mode footer sits on cream — swap colors */ body.page-mode .site-footer { background: var(--cream); border-top: 1px solid rgba(0,0,0,0.08); } body.page-mode .footer-tagline { color: var(--text-dark); } body.page-mode .footer-links a { color: var(--text-dark-secondary); } body.page-mode .footer-links a:hover { color: var(--text-dark); } body.page-mode .footer-dot { color: var(--text-dark-secondary); } body.page-mode .footer-copyright { color: var(--text-dark-secondary); } @media (max-width: 767px) { .page-wrap { padding: 60px 20px 80px; } .back-link { margin-bottom: 40px; font-size: 18px; } .page-header { margin-bottom: 48px; padding-bottom: 32px; } .page-body h2 { margin-top: 36px; } .page-cta { margin-top: 64px; padding-top: 40px; } }