/* ========================================================================== LitBulk — BOOK MARKETING Program Stylesheet: style.css -------------------------------------------------------------------------- TABLE OF CONTENTS 1. Design Tokens (CSS Custom Properties) 2. Reset & Base 3. Typography 4. Layout Utilities 5. Buttons & Links 6. Navigation 7. Hero 8. Bookmark / Section Signature Elements 9. Cards (Services, Portfolio, Testimonials) 10. Sections (About, Stats, FAQ, Contact) 11. Footer 12. Animations 13. Media Queries ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS Edit these values to re-theme the entire site from one place. -------------------------------------------------------------------------- */ :root { /* Brand colors — from client brief */ --color-primary: #6C4CF1; /* Primary brand violet */ --color-primary-dark: #5637d1; /* Darker shade for hover states */ --color-primary-light: #EFEAFE;/* Tint for backgrounds/badges */ --color-secondary: #121212; /* Near-black, used for dark sections & text */ --color-accent: #F4F4F4; /* Light neutral background */ --color-cta: #FF6B6B; /* Coral CTA color */ --color-cta-dark: #f04f4f; --color-white: #ffffff; --color-ink: #17171a; /* Primary text on light backgrounds */ --color-ink-soft: #55555c; /* Secondary text */ --color-line: #e7e5f0; /* Hairline borders on light bg */ --color-line-dark: #2a2a2e; /* Hairline borders on dark bg */ /* Typography — Fraunces (editorial serif, echoes "book" world) for display, Inter for UI/body legibility. Loaded via Google Fonts in . */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-9: clamp(2.6rem, 5vw + 1rem, 5rem); /* Hero headline */ --fs-8: clamp(2.1rem, 3vw + 1rem, 3.2rem); /* Section headline */ --fs-7: clamp(1.6rem, 1.6vw + 1rem, 2.1rem); --fs-6: 1.375rem; --fs-5: 1.125rem; --fs-4: 1rem; --fs-3: 0.9375rem; --fs-2: 0.8125rem; /* Spacing scale */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 6.5rem; --space-9: 9rem; /* Shape & elevation */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px; --shadow-soft: 0 1px 2px rgba(18,18,18,0.04), 0 12px 32px -12px rgba(18,18,18,0.12); --shadow-lift: 0 4px 8px rgba(18,18,18,0.06), 0 24px 48px -16px rgba(108,76,241,0.22); --container: 1180px; --transition: 220ms cubic-bezier(.4,0,.2,1); } /* Respect reduced motion preference across the whole site */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 2. RESET & BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; } body { font-family: var(--font-body); color: var(--color-ink); background: var(--color-white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Visible keyboard focus, everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } /* Skip link for keyboard/screen-reader users */ .skip-link { position: absolute; left: -999px; top: auto; background: var(--color-secondary); color: var(--color-white); padding: 0.75rem 1.25rem; z-index: 999; border-radius: var(--radius-sm); } .skip-link:focus { left: var(--space-3); top: var(--space-3); } /* -------------------------------------------------------------------------- 3. TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-secondary); line-height: 1.08; letter-spacing: -0.01em; font-weight: 600; } h1 { font-size: var(--fs-9); } h2 { font-size: var(--fs-8); } h3 { font-size: var(--fs-7); } h4 { font-size: var(--fs-6); font-family: var(--font-body); font-weight: 700; } p { color: var(--color-ink-soft); font-size: var(--fs-5); } .text-lead { font-size: var(--fs-6); color: var(--color-ink-soft); } .text-small { font-size: var(--fs-3); color: var(--color-ink-soft); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); } .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--color-cta); display: inline-block; } .section-head { max-width: 640px; margin-bottom: var(--space-7); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } /* -------------------------------------------------------------------------- 4. LAYOUT UTILITIES -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); } .section { padding-block: var(--space-8); } .section--tight { padding-block: var(--space-6); } .section--dark { background: var(--color-secondary); color: var(--color-white); } .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-white); } .section--dark p { color: rgba(255,255,255,0.65); } .section--accent { background: var(--color-accent); } .grid { display: grid; gap: var(--space-5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .stack { display: flex; flex-direction: column; } .cluster { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .divider { height: 1px; background: var(--color-line); border: none; margin: 0; } /* -------------------------------------------------------------------------- 5. BUTTONS & LINKS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.7rem; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-4); transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--cta { background: var(--color-cta); color: var(--color-white); box-shadow: 0 10px 24px -8px rgba(255,107,107,0.55); } .btn--cta:hover { background: var(--color-cta-dark); transform: translateY(-2px); } .btn--primary { background: var(--color-primary); color: var(--color-white); box-shadow: 0 10px 24px -8px rgba(108,76,241,0.5); } .btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--color-secondary); border: 1.5px solid var(--color-line); } .btn--ghost:hover { border-color: var(--color-secondary); } .section--dark .btn--ghost { color: var(--color-white); border-color: var(--color-line-dark); } .section--dark .btn--ghost:hover { border-color: var(--color-white); } .btn--sm { padding: 0.6rem 1.2rem; font-size: var(--fs-3); } .btn--block { width: 100%; } .text-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--color-primary); border-bottom: 1.5px solid transparent; transition: border-color var(--transition); } .text-link:hover { border-color: currentColor; } /* -------------------------------------------------------------------------- 6. NAVIGATION -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; padding-block: var(--space-3); background: rgba(255,255,255,0.78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color var(--transition), box-shadow var(--transition), padding var(--transition); } .site-header.is-scrolled { border-color: var(--color-line); box-shadow: 0 8px 30px -20px rgba(18,18,18,0.4); padding-block: var(--space-2); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .logo { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--color-secondary); } .logo .logo-mark { width: 10px; height: 14px; background: var(--color-cta); border-radius: 2px 6px 2px 2px; display: inline-block; transform: skewY(-4deg); } .nav-links { display: flex; align-items: center; gap: var(--space-5); } .nav-links a { font-size: var(--fs-3); font-weight: 600; color: var(--color-ink-soft); position: relative; padding-block: 4px; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-secondary); } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--color-primary); border-radius: 2px; } .nav-cta { display: flex; align-items: center; gap: var(--space-3); } .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; } .nav-toggle span { width: 22px; height: 2px; background: var(--color-secondary); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- 7. HERO -------------------------------------------------------------------------- */ .hero { position: relative; padding-top: var(--space-8); padding-bottom: var(--space-8); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: center; } .hero-copy h1 { margin-bottom: var(--space-4); } .hero-copy .text-lead { max-width: 46ch; margin-bottom: var(--space-5); } .hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); } .hero-proof { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); } .hero-proof .badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-2); font-weight: 700; color: var(--color-ink); background: var(--color-primary-light); padding: 0.4rem 0.8rem; border-radius: var(--radius-pill); } .hero-media { position: relative; } .hero-media .frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 4 / 5; } .hero-media .frame img { width: 100%; height: 100%; object-fit: cover; } /* Floating "bookmark" chip — the page's signature motif, echoed throughout the site as a ribbon-bookmark tag on cards & numerals. */ .floating-chip { position: absolute; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .floating-chip--top { top: -6%; left: -8%; } .floating-chip--bottom { bottom: -6%; right: -6%; } .floating-chip .chip-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--color-primary); color: #fff; display: grid; place-items: center; flex-shrink: 0; } .floating-chip strong { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--color-secondary); } .floating-chip span { font-size: var(--fs-2); color: var(--color-ink-soft); } /* -------------------------------------------------------------------------- 8. BOOKMARK / SIGNATURE ELEMENTS A ribbon-tag numeral used on process steps & service cards — nods to a bookmark tucked into a book, tying the visual system to the book niche. -------------------------------------------------------------------------- */ .ribbon-num { position: relative; width: 44px; height: 56px; background: var(--color-primary); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); flex-shrink: 0; } .ribbon-num--ghost { background: var(--color-accent); color: var(--color-secondary); } /* -------------------------------------------------------------------------- 9. CARDS -------------------------------------------------------------------------- */ /* Service cards */ .service-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); height: 100%; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; } .service-card .icon-badge { width: 48px; height: 48px; border-radius: 12px; background: var(--color-primary-light); color: var(--color-primary); display: grid; place-items: center; } .service-card h3 { font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; } .service-card p { font-size: var(--fs-4); flex-grow: 1; } .service-card .text-link { margin-top: auto; } /* Portfolio / showcase cards */ .showcase-card { border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); border: 1px solid var(--color-line); box-shadow: var(--shadow-soft); } .showcase-card .media { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--color-secondary); } .showcase-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .showcase-card:hover .media img { transform: scale(1.06); } .showcase-card .body { padding: var(--space-4); } .showcase-card .body h4 { margin-bottom: 4px; } .showcase-card .tag { display: inline-block; font-size: var(--fs-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); background: var(--color-primary-light); padding: 3px 10px; border-radius: var(--radius-pill); margin-bottom: var(--space-2); } /* Testimonial cards */ .testimonial-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); height: 100%; } .testimonial-card .quote { font-size: var(--fs-5); color: var(--color-ink); font-style: italic; } .testimonial-card .person { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; } .testimonial-card .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--color-accent); } .testimonial-card .stars { color: var(--color-cta); letter-spacing: 2px; font-size: 0.9rem; } .placeholder-flag { font-size: var(--fs-2); color: var(--color-ink-soft); background: var(--color-accent); border: 1px dashed var(--color-line); padding: 2px 8px; border-radius: var(--radius-pill); width: fit-content; } /* Stat cards */ .stat-card { text-align: center; padding: var(--space-5) var(--space-3); border-radius: var(--radius-md); border: 1px dashed var(--color-line-dark); } .stat-card .stat-number { font-family: var(--font-display); font-size: 2.4rem; color: var(--color-white); display: block; } .stat-card .stat-label { font-size: var(--fs-3); color: rgba(255,255,255,0.6); } /* -------------------------------------------------------------------------- 10. SECTIONS -------------------------------------------------------------------------- */ /* About */ .about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-7); align-items: center; } .about-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-soft); } .about-photo img { width: 100%; height: 100%; object-fit: cover; } .about-badges { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; } .about-badge { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-3); } .about-badge strong { display: block; font-family: var(--font-display); font-size: 1.2rem; } .about-badge span { font-size: var(--fs-2); color: var(--color-ink-soft); } /* Process steps */ .process-step { display: flex; gap: var(--space-4); padding-block: var(--space-4); } .process-step:not(:last-child) { border-bottom: 1px solid var(--color-line); } .process-step .step-body h3 { font-size: 1.25rem; margin-bottom: 6px; } /* FAQ accordion */ .faq-item { border-bottom: 1px solid var(--color-line); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); text-align: left; font-family: var(--font-display); font-size: 1.15rem; color: var(--color-secondary); } .faq-question .plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-line); display: grid; place-items: center; position: relative; transition: transform var(--transition), background var(--transition); } .faq-question .plus::before, .faq-question .plus::after { content: ""; position: absolute; background: var(--color-secondary); transition: transform var(--transition), opacity var(--transition); } .faq-question .plus::before { width: 10px; height: 1.5px; } .faq-question .plus::after { width: 1.5px; height: 10px; } .faq-item[open] .faq-question .plus { background: var(--color-primary); border-color: var(--color-primary); } .faq-item[open] .faq-question .plus::before, .faq-item[open] .faq-question .plus::after { background: #fff; } .faq-item[open] .faq-question .plus::after { transform: rotate(90deg); opacity: 0; } .faq-answer { padding-bottom: var(--space-4); max-width: 68ch; } .faq-item summary { list-style: none; cursor: pointer; } .faq-item summary::-webkit-details-marker { display: none; } /* Contact */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); } .contact-form { display: grid; gap: var(--space-4); } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label { font-size: var(--fs-3); font-weight: 600; } .field input, .field textarea, .field select { padding: 0.85rem 1rem; border: 1.5px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-ink); transition: border-color var(--transition), box-shadow var(--transition); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-light); outline: none; } .field textarea { resize: vertical; min-height: 140px; } .contact-channels { display: grid; gap: var(--space-3); } .channel-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-line-dark); transition: border-color var(--transition), background var(--transition); } .channel-card:hover { border-color: var(--color-primary); background: rgba(108,76,241,0.08); } .channel-card .icon-badge { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--color-primary); display: grid; place-items: center; flex-shrink: 0; } .channel-card strong { display: block; font-size: var(--fs-4); } .channel-card span { font-size: var(--fs-2); color: rgba(255,255,255,0.55); } /* Newsletter */ .newsletter-form { display: flex; gap: var(--space-2); max-width: 420px; } .newsletter-form input { flex: 1; padding: 0.85rem 1rem; border-radius: var(--radius-pill); border: 1.5px solid var(--color-line-dark); background: transparent; color: #fff; } .newsletter-form input::placeholder { color: rgba(255,255,255,0.45); } /* CTA band */ .cta-band { background: linear-gradient(135deg, var(--color-primary), #8a6ef4); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6); text-align: center; color: #fff; } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255,255,255,0.85); } /* Phone mockup for BookTok */ .phone-mockup { width: 230px; height: 470px; border-radius: 34px; border: 8px solid var(--color-secondary); background: var(--color-secondary); position: relative; overflow: hidden; box-shadow: var(--shadow-lift); flex-shrink: 0; } .phone-mockup::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; background: var(--color-secondary); border-radius: 12px; z-index: 2; } .phone-mockup .screen { width: 100%; height: 100%; object-fit: cover; } .phone-row { display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center; } /* Instagram-style grid */ .insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: var(--radius-md); overflow: hidden; } .insta-grid .insta-post { aspect-ratio: 1/1; overflow: hidden; } .insta-grid .insta-post img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .insta-grid .insta-post:hover img { transform: scale(1.08); } /* Dashboard mockup (Amazon Ads / FB Ads) */ .dash-mockup { border-radius: var(--radius-md); border: 1px solid var(--color-line); overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-soft); } .dash-mockup .dash-bar { display: flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-3); background: var(--color-accent); border-bottom: 1px solid var(--color-line); } .dash-mockup .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-line-dark); opacity: 0.3; } .dash-mockup img { width: 100%; display: block; } /* PDF preview cards (Author One Sheet) */ .pdf-card { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; background: #fff; text-align: center; } .pdf-card .pdf-thumb { aspect-ratio: 3/4; background: var(--color-accent); display: flex; align-items: center; justify-content: center; color: var(--color-ink-soft); } .pdf-card .pdf-body { padding: var(--space-4); } /* Video embed wrapper (keeps 16:9 responsively) */ .video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: var(--color-secondary); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* -------------------------------------------------------------------------- 11. FOOTER -------------------------------------------------------------------------- */ .site-footer { background: var(--color-secondary); color: rgba(255,255,255,0.65); padding-block: var(--space-7) var(--space-5); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-line-dark); } .footer-grid h4 { color: #fff; font-size: var(--fs-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); } .footer-grid ul { display: grid; gap: 0.6rem; } .footer-grid a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-4); font-size: var(--fs-2); flex-wrap: wrap; gap: var(--space-3); } .social-row { display: flex; gap: var(--space-2); } .social-row a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-line-dark); display: grid; place-items: center; transition: background var(--transition), border-color var(--transition); } .social-row a:hover { background: var(--color-primary); border-color: var(--color-primary); } /* Back to top */ .back-to-top { position: fixed; bottom: var(--space-4); right: var(--space-4); width: 46px; height: 46px; border-radius: 50%; background: var(--color-secondary); color: #fff; display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--transition), transform var(--transition), background var(--transition); z-index: 90; } .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { background: var(--color-primary); } .footer-list-2col { column-count: 2; column-gap: var(--space-4); } .footer-list-2col li { break-inside: avoid; } /* -------------------------------------------------------------------------- 12. ANIMATIONS -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.4,0,.2,1), transform 700ms cubic-bezier(.4,0,.2,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Page loading overlay */ .loader { position: fixed; inset: 0; background: var(--color-white); z-index: 999; display: flex; align-items: center; justify-content: center; transition: opacity 500ms ease, visibility 500ms ease; } .loader.is-hidden { opacity: 0; visibility: hidden; } .loader-mark { width: 16px; height: 22px; background: var(--color-primary); border-radius: 3px 8px 3px 3px; animation: loaderPulse 900ms ease-in-out infinite; } @keyframes loaderPulse { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.5); opacity: 0.5; } } /* Parallax hook — JS applies transform via CSS var --parallax-y */ [data-parallax] { transform: translateY(calc(var(--parallax-y, 0) * 1px)); will-change: transform; } /* -------------------------------------------------------------------------- 13. MEDIA QUERIES -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; } .hero-media { order: -1; max-width: 480px; margin-inline: auto; } .about-grid { grid-template-columns: 1fr; } .about-photo { max-width: 380px; margin-inline: auto; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .nav-links, .nav-cta .btn--ghost { display: none; } .nav-toggle { display: flex; } .nav.is-open .nav-links { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); padding: var(--space-4); border-bottom: 1px solid var(--color-line); gap: var(--space-3); } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding-block: var(--space-6); } .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); } .footer-bottom { flex-direction: column; align-items: flex-start; } .phone-row { gap: var(--space-4); } .phone-mockup { width: 200px; height: 410px; } } @media (max-width: 480px) { .hero-actions .btn { width: 100%; } .floating-chip { display: none; } }