/* components.css — REUSABLE COMPONENT STYLES * Cards, buttons, section wrappers, form elements. * Uses theme variables exclusively — no hardcoded visual values. * Order: linked last in . */ /* Typography — Work Sans headings, Source Sans 3 body. Headings are slightly tightened — like someone leaning in to talk. */ h1, h2, h3 { font-family: var(--font-heading); color: var(--color-text); } h1 { font-size: var(--size-h1); font-weight: var(--weight-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); } h2 { font-size: var(--size-h2); font-weight: var(--weight-heading); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); margin-bottom: var(--space-sm); } h3 { font-size: var(--size-h3); font-weight: var(--weight-heading); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); margin-bottom: var(--space-xs); } p { margin-bottom: var(--space-sm); line-height: var(--line-height-body); } p:last-child { margin-bottom: 0; } small, .text-small { font-size: var(--size-small); line-height: var(--line-height-small); } .text-tiny { font-size: var(--size-tiny); font-weight: var(--weight-medium); } .text-secondary { color: var(--color-text-secondary); } /* Section headings */ .section__heading { text-align: center; margin-bottom: var(--space-md); } .section__heading::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--color-accent); margin: var(--space-xs) auto 0; } /* Buttons — solid and honest. No gradients, no shadows, no pill shapes. Mike doesn't bounce when you push him — he holds firm. */ .btn { display: inline-block; padding: 0.75rem 1.5rem; /* 12px vertical / 24px horizontal */ font-family: var(--font-body); font-size: var(--size-body); font-weight: var(--weight-medium); text-decoration: none; text-align: center; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition); min-height: 44px; /* touch target minimum */ line-height: 1.25; } .btn--primary { background-color: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); } .btn--primary:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); } .btn--outline { background-color: transparent; color: var(--color-accent); border-color: var(--color-accent); } .btn--outline:hover { background-color: var(--color-accent); color: var(--color-white); } .btn:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Cards — defined by borders, not shadows. Borders feel direct and honest; shadows feel digital and layered. */ .card { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--card-padding); transition: border-color var(--transition); } .card:hover { border-color: var(--color-accent); } /* Pricing common line — sits above the cards */ .pricing__common { text-align: center; color: var(--color-text-secondary); margin-bottom: var(--space-md); } /* Pricing card */ .pricing-card { text-align: center; } .pricing-card__name { font-family: var(--font-heading); font-size: var(--size-h3); font-weight: var(--weight-heading); margin-bottom: var(--space-xs); } .pricing-card__price { font-size: var(--size-h2); font-weight: var(--weight-h1); color: var(--color-accent); margin-bottom: var(--space-md); } .pricing-card__per { font-size: var(--size-small); font-weight: var(--weight-body); color: var(--color-text-secondary); display: block; margin-top: var(--space-xs); } .pricing-card__details { list-style: none; text-align: left; margin-bottom: var(--space-md); } .pricing-card__details li { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); font-size: var(--size-small); } .pricing-card__details li:last-child { border-bottom: none; } .pricing-card__note { font-size: var(--size-small); color: var(--color-text-secondary); margin-top: var(--space-sm); } /* "Most Popular" tag — understated. Honest recommendation, not a flashing badge. */ .pricing-card__tag { display: inline-block; padding: var(--space-xs) var(--space-sm); font-size: var(--size-tiny); font-weight: var(--weight-medium); color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-sm); } /* Audience card — simple icons, problem-focused titles */ .audience-card { text-align: center; display: flex; flex-direction: column; } .audience-card p { flex: 1; } .audience-card__icon { font-size: 2rem; margin-bottom: var(--space-xs); } .audience-card__title { font-family: var(--font-heading); font-size: var(--size-h3); font-weight: var(--weight-heading); margin-bottom: var(--space-xs); } /* Credentials list — declarative statements, not certification bullet points */ .credential { padding: var(--space-sm); border-left: 3px solid var(--color-accent); background-color: var(--color-bg-alt); } .credential__title { font-weight: var(--weight-medium); margin-bottom: var(--space-xs); } .credential__desc { font-size: var(--size-small); color: var(--color-text-secondary); } /* Contact info */ .contact-info { list-style: none; } .contact-info li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); } .contact-info li:last-child { border-bottom: none; } .contact-info__label { font-weight: var(--weight-medium); display: block; margin-bottom: var(--space-xs); } .contact-info__value { color: var(--color-text-secondary); } .contact-info__value a { color: var(--color-accent); text-decoration: none; } .contact-info__value a:hover { text-decoration: underline; } /* Contact form — three fields only: name, email, message. Mike doesn't gatekeep. */ .contact-form { display: flex; flex-direction: column; gap: var(--space-sm); } .contact-form__field { display: flex; flex-direction: column; } .contact-form__label { font-weight: var(--weight-medium); font-size: var(--size-small); margin-bottom: var(--space-xs); } .contact-form__input, .contact-form__textarea { width: 100%; padding: 0.75rem; font-family: var(--font-body); font-size: var(--size-body); border: 1px solid var(--color-border); border-radius: var(--radius); background-color: var(--color-bg); color: var(--color-text); transition: border-color var(--transition); min-height: 44px; /* touch target minimum */ } .contact-form__input:focus, .contact-form__textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-accent); } .contact-form__textarea { min-height: 120px; resize: vertical; } /* Tag / badge — generic, for metadata */ .tag { display: inline-block; padding: 0.25rem 0.5rem; font-size: var(--size-tiny); font-weight: var(--weight-medium); color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius); text-transform: uppercase; letter-spacing: 0.05em; } /* Divider */ .divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-md) 0; } /* Hero CTA — two buttons, not one. Options, not funnels. */ .hero__cta { display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-md); } /* Dark section overrides — "step into the ring" moment. The tone shifts, the energy focuses. */ .section--dark h2 { color: var(--color-white); } .section--dark .section__heading::after { background-color: var(--color-accent); } .section--dark p { color: var(--color-white); opacity: 0.85; } .section--dark a { color: var(--color-accent); } .section--dark .contact-form__input, .section--dark .contact-form__textarea { background-color: var(--color-bg-dark); border-color: var(--color-border); color: var(--color-white); } .section--dark .contact-form__label { color: var(--color-white); } /* Mobile card padding override */ @media (max-width: 480px) { .card { padding: var(--card-padding-mobile); } .btn { width: 100%; } }