/* ============================================================ FLOWSTATE DIGITAL — Design System & Styles Minimal Brutalist · Elegant · High-Contrast ============================================================ */ /* --- Google Fonts loaded in HTML --- */ /* ============================================================ 1. CSS CUSTOM PROPERTIES ============================================================ */ :root { /* Colors */ --color-paper: #F6F2E8; --color-ink: #131210; --color-orange: #FF5A1F; --color-cobalt: #2B3EFF; --color-lime: #D6FF3D; --color-card: #FFFDF7; --color-muted: #6B655A; /* Typography */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; /* Spacing */ --section-pad-y: 120px; --section-pad-x: 24px; --content-max: 1200px; --card-pad: 36px; /* Borders & Shadows */ --border: 2px solid var(--color-ink); --border-thin: 1.5px solid var(--color-ink); --shadow-hard: 4px 4px 0 var(--color-ink); --shadow-hard-sm: 3px 3px 0 var(--color-ink); --radius: 0px; /* Transitions */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration: 0.2s; } @media (max-width: 768px) { :root { --section-pad-y: 72px; --card-pad: 24px; } } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--color-ink); background-color: var(--color-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: var(--color-cobalt); text-decoration: none; transition: color var(--duration) var(--ease); } a:hover { color: var(--color-orange); } ul, ol { list-style: none; } /* Skip Link */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--color-ink); color: var(--color-paper); padding: 12px 24px; z-index: 10000; font-weight: 600; border: var(--border); } .skip-link:focus { top: 16px; } /* ============================================================ 3. TYPOGRAPHY ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } h1 { font-size: clamp(40px, 6vw, 80px); } h2 { font-size: clamp(32px, 4vw, 44px); } h3 { font-size: clamp(20px, 2.5vw, 26px); font-weight: 600; } p { max-width: 680px; } .text-muted { color: var(--color-muted); } .text-large { font-size: 20px; line-height: 1.55; } /* ============================================================ 4. LAYOUT UTILITIES ============================================================ */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--section-pad-x); } .section { padding: var(--section-pad-y) 0; } .section--dark { background-color: var(--color-ink); color: var(--color-paper); } .section--dark .text-muted { color: #9e9a91; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; gap: 20px; } } /* ============================================================ 5. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; border: var(--border); border-radius: var(--radius); cursor: pointer; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease); -webkit-tap-highlight-color: transparent; min-height: 52px; } .btn--primary { background-color: var(--color-orange); color: var(--color-ink); box-shadow: var(--shadow-hard); } .btn--primary:hover { background-color: #e8501a; color: var(--color-ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--color-ink); } .btn--primary:active { transform: translate(4px, 4px); box-shadow: none; } .btn--secondary { background-color: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-hard-sm); } .btn--secondary:hover { background-color: #2a2820; color: var(--color-paper); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-muted); } .btn--secondary:active { transform: translate(3px, 3px); box-shadow: none; } .btn--ghost { background: transparent; color: var(--color-ink); border-color: transparent; box-shadow: none; padding: 12px 0; text-transform: none; letter-spacing: 0; } .btn--ghost:hover { color: var(--color-cobalt); } .btn--ghost .arrow { transition: transform var(--duration) var(--ease); } .btn--ghost:hover .arrow { transform: translateX(4px); } /* Small button variant */ .btn--sm { padding: 10px 20px; font-size: 14px; min-height: 42px; } /* ============================================================ 6. CARDS ============================================================ */ .card { background: var(--color-card); border: var(--border); border-radius: var(--radius); padding: var(--card-pad); box-shadow: var(--shadow-hard); transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-ink); } /* ============================================================ 7. BADGES / TAGS ============================================================ */ .badge { display: inline-flex; align-items: center; padding: 4px 12px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1.5px solid var(--color-ink); border-radius: var(--radius); } .badge--cobalt { background: var(--color-cobalt); color: var(--color-paper); } .badge--orange { background: var(--color-orange); color: var(--color-ink); } .badge--lime { background: var(--color-lime); color: var(--color-ink); } /* ============================================================ 8. NAVIGATION ============================================================ */ .nav { position: sticky; top: 0; z-index: 1000; background: var(--color-paper); border-bottom: var(--border); transition: box-shadow var(--duration) var(--ease); } .nav.scrolled { box-shadow: 0 2px 0 var(--color-ink); } .nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--section-pad-x); height: 72px; } .nav__logo { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-ink); text-decoration: none; letter-spacing: -0.01em; } .nav__logo:hover { color: var(--color-ink); } .nav__links { display: flex; align-items: center; gap: 32px; } .nav__link { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--color-ink); text-decoration: none; position: relative; } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--color-cobalt); transition: width var(--duration) var(--ease); } .nav__link:hover { color: var(--color-ink); } .nav__link:hover::after { width: 100%; } .nav__cta { margin-left: 8px; } /* Hamburger */ .nav__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 48px; padding: 12px; background: none; border: none; cursor: pointer; z-index: 1001; } .nav__hamburger span { display: block; width: 100%; height: 2.5px; background: var(--color-ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .nav__hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav__hamburger.active span:nth-child(2) { opacity: 0; } .nav__hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Mobile Nav */ @media (max-width: 768px) { .nav__hamburger { display: flex; } .nav__links { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-ink); flex-direction: column; justify-content: center; gap: 40px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); z-index: 1000; } .nav__links.open { opacity: 1; pointer-events: all; } .nav__link { color: var(--color-paper); font-family: var(--font-display); font-size: 28px; font-weight: 700; } .nav__link::after { background: var(--color-orange); } .nav__link:hover { color: var(--color-paper); } .nav__cta .btn { font-size: 18px; padding: 16px 40px; } .nav__hamburger.active span { background: var(--color-paper); } } /* ============================================================ 9. HERO SECTION ============================================================ */ .hero { min-height: calc(100vh - 72px); display: flex; align-items: center; padding: var(--section-pad-y) 0; position: relative; overflow: hidden; } .hero__content { position: relative; z-index: 1; max-width: 800px; } .hero__headline { margin-bottom: 24px; } .hero__subhead { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--color-muted); margin-bottom: 40px; max-width: 620px; } .hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } /* Decorative brutalist block */ .hero__deco { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 360px; height: 360px; border: 3px solid var(--color-ink); background: var(--color-lime); box-shadow: 8px 8px 0 var(--color-ink); opacity: 0.15; z-index: 0; } .hero__deco-2 { position: absolute; right: 80px; top: 30%; width: 200px; height: 200px; border: 3px solid var(--color-ink); background: var(--color-cobalt); box-shadow: 6px 6px 0 var(--color-ink); opacity: 0.08; z-index: 0; } @media (max-width: 768px) { .hero { min-height: auto; padding: 64px 0 80px; } .hero__deco, .hero__deco-2 { display: none; } } /* ============================================================ 10. PROBLEM / AGITATION SECTION ============================================================ */ .problem { border-top: var(--border); border-bottom: var(--border); background: var(--color-card); } .problem__title { margin-bottom: 48px; } .problem__body p { margin-bottom: 24px; font-size: 18px; line-height: 1.7; max-width: 720px; } .problem__body p:last-child { margin-bottom: 0; } .problem__body strong { color: var(--color-ink); } .problem__highlight { color: var(--color-cobalt); font-weight: 600; } /* ============================================================ 11. SERVICES SECTION ============================================================ */ .services__header { margin-bottom: 56px; } .services__header h2 { margin-top: 12px; } .service-card { display: flex; flex-direction: column; gap: 16px; } .service-card__title { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 28px); font-weight: 700; line-height: 1.15; margin-top: 8px; } .service-card__desc { color: var(--color-muted); font-size: 16px; line-height: 1.65; flex-grow: 1; } /* ============================================================ 12. HOW IT WORKS SECTION ============================================================ */ .how-it-works { border-top: var(--border); background: var(--color-card); } .how-it-works__header { margin-bottom: 64px; } .how-it-works__header h2 { margin-top: 12px; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; } .step { position: relative; } .step__number { font-family: var(--font-display); font-size: 64px; font-weight: 700; color: var(--color-lime); line-height: 1; -webkit-text-stroke: 2px var(--color-ink); paint-order: stroke fill; margin-bottom: 16px; } .step__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 8px; } .step__desc { font-size: 15px; color: var(--color-muted); line-height: 1.6; } /* Connector line between steps */ .step::after { content: ''; position: absolute; top: 32px; right: -16px; width: calc(100% - 40px); height: 2px; background: var(--color-ink); transform: translateX(100%); } .step:last-child::after { display: none; } @media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 40px; padding-left: 40px; border-left: 3px solid var(--color-ink); } .step::after { display: none; } .step::before { content: ''; position: absolute; left: -46px; top: 12px; width: 14px; height: 14px; background: var(--color-orange); border: 2px solid var(--color-ink); } } /* ============================================================ 13. PROOF / TRUST SECTION ============================================================ */ .proof__content { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .proof__text h2 { margin-bottom: 24px; } .proof__text p { color: var(--color-muted); margin-bottom: 16px; } .proof__skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .proof__card { background: var(--color-card); border: var(--border); box-shadow: var(--shadow-hard); padding: var(--card-pad); display: flex; flex-direction: column; gap: 20px; } .proof__stat { font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1; } .proof__stat-label { font-size: 15px; color: var(--color-muted); } @media (max-width: 768px) { .proof__content { grid-template-columns: 1fr; gap: 40px; } } /* ============================================================ 14. PRICING SECTION ============================================================ */ .pricing { border-top: var(--border); background: var(--color-card); } .pricing__header { margin-bottom: 56px; } .pricing__header h2 { margin-top: 12px; } .pricing-card { display: flex; flex-direction: column; position: relative; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .pricing-card__tier { font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 4px; } .pricing-card__name { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-bottom: 8px; padding-bottom: 0; border-bottom: none; } .pricing-card__price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--color-ink); margin: 0.75rem 0 1rem; line-height: 1.1; } .pricing-card__detail { font-size: 15px; color: var(--color-muted); line-height: 1.5; margin-bottom: 1.5rem; } .pricing-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; flex-grow: 1; padding-top: 1.5rem; border-top: var(--border-thin); } .pricing-card__features li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 15px; line-height: 1.5; } .pricing-card__features li .check { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--color-ink); color: var(--color-paper); font-size: 12px; font-weight: 700; margin-top: 2px; } .pricing-card__cta { margin-top: auto; padding-top: 2rem; } .pricing-card__cta .btn { width: 100%; text-align: center; } /* --- Featured Card (Growth / Tier 2) --- */ .pricing-card--featured { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); border-width: 3px; } .pricing-card--featured::before { content: 'MOST POPULAR'; position: absolute; top: -14px; left: 24px; background: var(--color-orange); color: var(--color-ink); font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 14px; border: 1.5px solid var(--color-ink); } .pricing-card--featured .pricing-card__tier { color: rgba(246, 242, 232, 0.5); } .pricing-card--featured .pricing-card__name { color: var(--color-paper); } .pricing-card--featured .pricing-card__price { color: var(--color-orange); } .pricing-card--featured .pricing-card__detail { color: rgba(246, 242, 232, 0.65); } .pricing-card--featured .pricing-card__features { border-top-color: rgba(246, 242, 232, 0.15); } .pricing-card--featured .pricing-card__features li { color: var(--color-paper); } .pricing-card--featured .pricing-card__features li .check { background: var(--color-orange); color: var(--color-ink); } .pricing-card--featured:hover { background: var(--color-ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-orange); } /* Bundle Callout */ .bundle-callout { margin-top: 48px; background: var(--color-orange); border: 3px solid var(--color-ink); box-shadow: 6px 6px 0 var(--color-ink); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .bundle-callout__text h3 { font-size: clamp(20px, 2.5vw, 26px); margin-bottom: 8px; color: var(--color-ink); } .bundle-callout__text p { color: var(--color-ink); font-size: 16px; opacity: 0.85; } .bundle-callout .btn { flex-shrink: 0; background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); box-shadow: 4px 4px 0 rgba(0,0,0,0.3); } .bundle-callout .btn:hover { background: #2a2820; } @media (max-width: 768px) { .bundle-callout { flex-direction: column; text-align: center; padding: 32px 24px; } } /* ============================================================ 15. FAQ SECTION ============================================================ */ .faq__header { margin-bottom: 48px; } .faq__header h2 { margin-top: 12px; } .faq__list { max-width: 800px; } .faq-item { border-top: var(--border); } .faq-item:last-child { border-bottom: var(--border); } .faq-item__question { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 24px 0; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--color-ink); text-align: left; line-height: 1.3; min-height: 48px; } .faq-item__question:hover { color: var(--color-cobalt); } .faq-item__icon { flex-shrink: 0; width: 24px; height: 24px; position: relative; transition: transform 0.3s var(--ease); } .faq-item__icon::before, .faq-item__icon::after { content: ''; position: absolute; background: var(--color-ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .faq-item__icon::before { width: 24px; height: 2.5px; top: 50%; left: 0; transform: translateY(-50%); } .faq-item__icon::after { width: 2.5px; height: 24px; left: 50%; top: 0; transform: translateX(-50%); } .faq-item.active .faq-item__icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } .faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease), padding 0.3s var(--ease); } .faq-item__answer-inner { padding-bottom: 24px; } .faq-item__answer p { font-size: 16px; line-height: 1.65; color: var(--color-muted); } .faq-item.active .faq-item__answer { max-height: 300px; } /* ============================================================ 16. FINAL CTA SECTION ============================================================ */ .final-cta { text-align: center; border-top: var(--border); } .final-cta h2 { margin-bottom: 16px; color: var(--color-paper); } .final-cta p { margin: 0 auto 40px; color: #9e9a91; max-width: 560px; font-size: 18px; } .final-cta .btn--primary { font-size: 18px; padding: 20px 48px; } /* ============================================================ 17. FOOTER ============================================================ */ .footer { border-top: 2px solid #2a2820; background: var(--color-ink); color: var(--color-paper); padding: 64px 0 40px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer__brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 12px; } .footer__brand-desc { font-size: 15px; color: #9e9a91; line-height: 1.6; max-width: 320px; } .footer__heading { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin-bottom: 16px; } .footer__link { display: block; color: #c8c3b8; font-size: 15px; margin-bottom: 10px; text-decoration: none; } .footer__link:hover { color: var(--color-orange); } .footer__bottom { border-top: 1.5px solid #2a2820; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--color-muted); } @media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr; gap: 32px; } .footer__bottom { flex-direction: column; gap: 12px; text-align: center; } } /* ============================================================ 18. SCROLL REVEAL ANIMATIONS ============================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger delays for grid children */ .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.35s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ 19. FOCUS STYLES (Accessibility) ============================================================ */ :focus-visible { outline: 3px solid var(--color-cobalt); outline-offset: 3px; } button:focus-visible, a:focus-visible { outline: 3px solid var(--color-cobalt); outline-offset: 3px; } /* ============================================================ 20. BODY SCROLL LOCK (for mobile menu) ============================================================ */ body.menu-open { overflow: hidden; } /* ============================================================ 21. SECTION DIVIDER ============================================================ */ .divider { border: none; border-top: var(--border); margin: 0; }