/* ============================================================ Print & Cast Studio — styles.css Mobile-first. Desktop breakpoint: 1024px Fonts: Outfit (body), Zilla Slab (display) Loaded via Google Fonts in ============================================================ */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Outfit', sans-serif; color: #333333; background: #ffffff; line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } a { text-decoration: none; color: inherit; } /* ---- Design tokens ---- */ :root { --primary: #1A0E71; --secondary: #5448AE; --light: #DAD8EB; --text: #333333; --white: #ffffff; --pad-x-mobile: 20px; --pad-x-desktop: 60px; --max-w: 1200px; } /* ---- Container ---- */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x-mobile); } @media (min-width: 1024px) { .container { padding: 0 var(--pad-x-desktop); } } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-block; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; padding: 12px 28px; border-radius: 4px; cursor: pointer; transition: opacity 0.2s; text-align: center; white-space: nowrap; line-height: 1; } .btn:hover { opacity: 0.82; } .btn--outline-navy { border: 2px solid var(--primary); color: var(--primary); background: transparent; } .btn--filled-purple { border: 2px solid var(--secondary); color: var(--white); background: var(--secondary); } .btn--outline-white { border: 2px solid var(--white); color: var(--white); background: transparent; } /* ============================================================ HEADER ============================================================ */ .site-header { background: var(--white); padding: 28px var(--pad-x-mobile) 24px; } .site-header__inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; } .site-header__brand { display: flex; flex-direction: column; align-items: center; gap: 10px; } .site-header__logo { width: 72px; height: 72px; } .site-header__text { display: flex; flex-direction: column; align-items: center; gap: 4px; } .site-header__name { font-family: 'Zilla Slab', serif; font-size: 28px; font-weight: 700; color: var(--primary); line-height: 1.15; text-align: center; } .site-header__tagline { font-size: 14px; color: var(--text); text-align: center; } @media (min-width: 1024px) { .site-header { padding: 22px var(--pad-x-desktop); } .site-header__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 0; } .site-header__brand { flex-direction: row; align-items: center; gap: 18px; } .site-header__logo { width: 64px; height: 64px; } .site-header__text { align-items: flex-start; } .site-header__name { font-size: 42px; text-align: left; } .site-header__tagline { font-size: 15px; text-align: left; } } /* ============================================================ HERO ============================================================ */ .hero { width: 100%; overflow: hidden; line-height: 0; background: var(--light); } .hero__img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 1 / 1; /* hero_sm is ~square */ } @media (min-width: 1024px) { .hero__img { aspect-ratio: 2 / 1; /* hero_lg is 1200×600 */ } } /* ============================================================ WHO WE WORK WITH ============================================================ */ .who { padding: 48px var(--pad-x-mobile); } .who__inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } /* Mobile order */ .who__intro { order: 1; } .who__photo { order: 2; } .who__support { order: 3; } .who__intro { font-size: 16px; line-height: 1.75; color: var(--text); } .who__photo img { width: 100%; aspect-ratio: 551 / 474; object-fit: cover; border-radius: 4px; } .who__support { display: flex; flex-direction: column; gap: 16px; } .who__support-label { font-size: 16px; font-weight: 600; color: var(--text); } .who__bullets { display: flex; flex-direction: column; gap: 8px; } .who__bullets li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.6; } .who__bullets li::before { content: '•'; position: absolute; left: 0; color: var(--secondary); font-size: 16px; line-height: 1.5; } @media (min-width: 1024px) { .who { padding: 80px var(--pad-x-desktop); } .who__inner { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto 1fr; column-gap: 60px; row-gap: 0; align-items: start; } /* Reset flex order for grid */ .who__intro { order: unset; grid-column: 1; grid-row: 1; padding-bottom: 28px; } .who__photo { order: unset; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; } .who__support { order: unset; grid-column: 1; grid-row: 2; } .who__photo img { width: 100%; height: 100%; aspect-ratio: unset; object-fit: cover; min-height: 320px; } .who__intro { font-size: 17px; } .who__bullets li { font-size: 16px; } } /* ============================================================ WHY WORK WITH US ============================================================ */ .why { border-top: 1px solid var(--light); border-bottom: 1px solid var(--light); padding: 48px var(--pad-x-mobile); } .why__inner { max-width: var(--max-w); margin: 0 auto; } .why__heading { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 600; color: var(--secondary); text-align: center; margin-bottom: 36px; } .why__items { display: flex; flex-direction: column; gap: 28px; } .why__item { display: flex; align-items: center; gap: 20px; } /* Mobile: show sm icons, hide lg */ .why__icon .icon-lg { display: none; } .why__icon .icon-sm { display: block; width: 80px; height: 80px; flex-shrink: 0; } .why__label { font-size: 15px; line-height: 1.6; color: var(--text); } @media (min-width: 1024px) { .why { padding: 64px var(--pad-x-desktop); } .why__heading { font-size: 26px; margin-bottom: 52px; } .why__items { flex-direction: row; justify-content: space-between; gap: 48px; } .why__item { flex-direction: column; align-items: center; text-align: center; flex: 1; gap: 20px; } /* Desktop: show lg icons, hide sm */ .why__icon .icon-sm { display: none; } .why__icon .icon-lg { display: block; width: 120px; height: 120px; flex-shrink: 0; } .why__label { font-size: 16px; max-width: 260px; } } /* ============================================================ WHAT WE MAKE ============================================================ */ .what { background: var(--light); padding: 48px var(--pad-x-mobile); } .what__inner { max-width: var(--max-w); margin: 0 auto; } .what__heading { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 600; color: var(--primary); text-align: center; margin-bottom: 8px; } .what__sub { font-size: 14px; color: var(--text); text-align: center; margin-bottom: 28px; line-height: 1.6; } .what__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .product-card { background: var(--white); border-radius: 4px; overflow: hidden; } .product-card__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #e0dded; } .product-card__name { font-size: 13px; color: var(--text); text-align: center; padding: 10px 8px 12px; line-height: 1.4; } @media (min-width: 1024px) { .what { padding: 72px var(--pad-x-desktop); } .what__heading { font-size: 26px; margin-bottom: 10px; } .what__sub { font-size: 15px; margin-bottom: 36px; } .what__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } .product-card__name { font-size: 14px; padding: 12px 10px 16px; } } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--primary); color: var(--white); padding: 48px var(--pad-x-mobile) 0; } .site-footer__main { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; gap: 36px; padding-bottom: 40px; } /* Brand column */ .site-footer__brand { display: flex; flex-direction: column; gap: 10px; } .site-footer__logo { width: 60px; height: 60px; } .site-footer__name { font-family: 'Zilla Slab', serif; font-size: 20px; font-weight: 700; color: var(--white); line-height: 1.2; } .site-footer__tagline { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5; max-width: 220px; } /* Contact column */ .site-footer__contact { display: flex; flex-direction: column; gap: 4px; } .site-footer__contact p, .site-footer__contact a { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.7; } .site-footer__contact a:hover { color: var(--white); text-decoration: underline; } /* Actions column */ .site-footer__actions { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .site-footer__social { display: flex; gap: 20px; align-items: center; } .site-footer__social a { display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; } .site-footer__social a:hover { opacity: 0.72; } .site-footer__social img { width: 28px; height: 28px; } .site-footer__actions .btn--outline-white { width: 100%; text-align: center; } /* Bottom bar */ .site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 20px 0 24px; max-width: var(--max-w); margin: 0 auto; } .site-footer__copyright { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 6px; } .site-footer__privacy { font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.65; } @media (min-width: 1024px) { .site-footer { padding: 56px var(--pad-x-desktop) 0; } .site-footer__main { flex-direction: row; align-items: flex-start; gap: 48px; padding-bottom: 52px; } .site-footer__brand { flex: 0 0 220px; } .site-footer__contact { flex: 1; } .site-footer__actions { flex: 0 0 220px; align-items: flex-start; } .site-footer__actions .btn--outline-white { width: auto; min-width: 180px; } }