/* ============================================================= Gabriela Mori — Makeup Artist Shared stylesheet for index.html (Portfolio), bio.html (Bio), servicos.html (Serviços), and contato.html (Contato) ------------------------------------------------------------- Sections: 1. Design tokens (colors, type, spacing) 2. Base / resets 3. Site header (wordmark, nav) 4. Portfolio — horizontal filmstrip 5. Bio — hero + meta rail + copy 5b. Serviços — statement + card grid 5c. Contato — statement + channel list 6. Footer 7. Responsive (mobile-first overrides at <= 760px) ============================================================= */ /* ---------- 1. Design tokens ---------- */ :root { --bg: #faf8f4; /* off-white page background */ --ink: #1a1714; /* near-black primary text */ --ink-soft: #33302b; /* body copy */ --muted: #9c958b; /* subtitle / meta gray */ --accent: #e08363; /* coral accent */ --line: #e2dcd3; /* hairline / underline tint */ --tile: #f0ede8; /* empty photo-tile fill */ --font-display: 'Jost', system-ui, sans-serif; /* wordmark + nav */ --font-serif: 'Cormorant Garamond', Georgia, serif; /* italic accents */ --font-body: 'Mulish', system-ui, sans-serif; /* body copy */ --pad-x: clamp(24px, 6vw, 88px); /* shared page side padding */ } /* ---------- 2. Base / resets ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 400; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; } ::selection { background: rgba(224, 131, 99, 0.25); color: var(--ink); } /* Visually-hidden helper for accessible labels */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 3. Site header ---------- */ .site-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 5vw, 56px) var(--pad-x) 0; } .wordmark-block { text-decoration: none; display: inline-block; } .wordmark { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(27px, 4.4vw, 46px); line-height: 1; letter-spacing: 0.28em; text-indent: 0.28em; /* balances the trailing tracking */ text-transform: uppercase; white-space: nowrap; color: var(--ink); } .wordmark-sub { display: block; margin-top: 9px; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.34em; text-indent: 0.34em; color: var(--muted); } .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 26px 30px; padding-top: 8px; font-family: var(--font-display); font-weight: 300; font-size: 15px; letter-spacing: 0.13em; } .nav-link { text-decoration: none; color: var(--ink); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .nav-link:hover { border-bottom-color: var(--line); } .nav-link.is-active { border-bottom-color: var(--ink); } /* ---------- 4. Portfolio — horizontal filmstrip ---------- */ /* The portfolio page turns into a full-height flex column so the strip fills whatever vertical space the header leaves (no page scroll). */ .page-portfolio { display: flex; flex-direction: column; height: 100svh; min-height: 100svh; overflow: hidden; } .portfolio { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; overflow: hidden; } .filmstrip { display: flex; align-items: center; gap: 10px; width: 100%; padding: clamp(20px, 4vh, 60px) 0 clamp(20px, 4vh, 60px) var(--pad-x); overflow-x: auto; scrollbar-width: thin; } .filmstrip::-webkit-scrollbar { height: 6px; } .filmstrip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .filmstrip::-webkit-scrollbar-track { background: transparent; } .filmstrip__item { flex: 0 0 auto; height: min(680px, 100%); aspect-ratio: 1; /* square crop on desktop */ width: auto; object-fit: cover; transition: opacity 0.45s ease; } .filmstrip__item:hover { opacity: 0.9; } /* Carousel nav arrows — hidden until the strip is hovered (desktop only) */ .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: clamp(46px, 4.2vw, 60px); height: clamp(46px, 4.2vw, 60px); display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; border: none; cursor: pointer; opacity: 0; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2); transition: opacity 0.28s ease; } .carousel-nav--prev { left: clamp(10px, 1.4vw, 22px); } .carousel-nav--next { right: clamp(10px, 1.4vw, 22px); } .carousel-nav[hidden] { display: none; } .portfolio:hover .carousel-nav { opacity: 1; } .carousel-nav:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- 5. Bio ---------- */ .bio { max-width: 1300px; /* keep in sync with .services / .contact */ margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--pad-x) 120px; } .bio__hero { max-width: 900px; padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(44px, 5vw, 68px); border-bottom: 1px solid var(--line); } .bio__eyebrow { font-family: var(--font-display); font-weight: 300; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; } .bio__lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 4vw, 50px); line-height: 1.18; letter-spacing: 0.005em; color: var(--ink); margin: 0; text-wrap: pretty; } .bio__lead em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--accent); } .bio__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; } .bio__meta { display: flex; flex-direction: column; gap: 26px; margin: 0; } .bio__meta-item { margin: 0; } .bio__meta-item dt { font-family: var(--font-display); font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .bio__meta-item dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); } .bio__copy { max-width: 760px; font-size: 18px; line-height: 1.9; color: var(--ink-soft); } .bio__copy p { margin: 0 0 26px; } .bio__copy p:last-child { margin-bottom: 0; } /* Sibling of .bio__body: the copy is offset into the same second column as .bio__body so it lines up under the biography (the grid columns mirror .bio__body). */ .bio__freetime { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); margin-top: clamp(32px, 4vw, 44px); font-size: 18px; line-height: 1.9; color: var(--ink-soft); } .bio__freetime > * { grid-column: 2; max-width: 760px; } .bio__freetime p { margin: 0 0 8px; } .bio__freetime p:last-child { margin-bottom: 0; } /* ---------- 5b. Serviços ---------- */ .services { max-width: 1300px; /* keep in sync with .bio / .contact */ margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--pad-x) 120px; } /* Head sizes track .bio__hero/.bio__eyebrow/.bio__lead so both pages share one display scale (no border-bottom here — the grid's border-top is the line) */ .services__head { max-width: 900px; margin: 0 0 clamp(40px, 6vw, 72px); } .services__kicker { font-family: var(--font-display); font-weight: 300; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; } .services__statement { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 4vw, 50px); line-height: 1.18; letter-spacing: 0.005em; color: var(--ink); margin: 0; text-wrap: pretty; } .services__statement em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--accent); } .services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .service-card { padding: clamp(26px, 2.6vw, 38px) clamp(22px, 2.4vw, 34px) clamp(34px, 3.4vw, 46px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.25s ease; } .service-card:not(.service-card--cta):hover { background: var(--tile); } .service-card__index { display: block; font-family: var(--font-display); font-weight: 300; font-size: 13px; letter-spacing: 0.16em; color: var(--muted); margin-bottom: clamp(28px, 4vw, 48px); } .service-card__name { margin: 0 0 14px; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.15; letter-spacing: 0.01em; color: var(--ink); } .service-card__desc { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); max-width: 30ch; } .service-card--cta { display: flex; flex-direction: column; justify-content: flex-end; background: var(--ink); } .service-card__cta-label { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); color: var(--bg); margin: 0 0 22px; } .service-card__cta-links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 15px; letter-spacing: 0.1em; } .service-card__cta-links a { text-decoration: none; color: var(--bg); padding-bottom: 3px; border-bottom: 1px solid rgba(250, 248, 244, 0.35); transition: border-color 0.2s ease, color 0.2s ease; } .service-card__cta-links a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ---------- 5c. Contato ---------- */ .contact { max-width: 1300px; /* keep in sync with .bio / .services */ margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--pad-x) 120px; } /* Head sizes track .bio__hero/.services__head so all three pages share one display scale (no border-bottom here — the channel list's border-top is the line) */ .contact__head { max-width: 900px; margin: 0 0 clamp(40px, 6vw, 72px); } .contact__eyebrow { font-family: var(--font-display); font-weight: 300; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; } .contact__statement { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 4vw, 50px); line-height: 1.18; letter-spacing: 0.005em; color: var(--ink); margin: 0; text-wrap: pretty; } .contact__statement em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--accent); } /* Channel list — small label left, value right, hairline between rows */ .contact__list { margin: 0; border-top: 1px solid var(--line); } .contact-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: baseline; margin: 0; padding: clamp(24px, 3vw, 34px) 0; border-bottom: 1px solid var(--line); } .contact-row__label { font-family: var(--font-display); font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .contact-row__value { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.3; color: var(--ink); } .contact-row__value a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .contact-row__value a:hover { color: var(--accent); } /* ---------- 6. Responsive (<= 760px) ---------- */ @media (max-width: 760px) { /* Header: nav owns its own full-width row below the wordmark, with taller tap areas (on desktop it shares one tight line with the wordmark) */ .site-nav { width: 100%; gap: 10px 24px; padding-top: 0; } .nav-link { padding-top: 8px; padding-bottom: 8px; } /* Portfolio: page scrolls; strip becomes a vertical stack of full photos */ .page-portfolio { display: block; height: auto; min-height: 0; overflow: visible; } .portfolio { display: block; overflow: visible; } .filmstrip { flex-direction: column; gap: 22px; padding: 36px var(--pad-x) 28px; overflow: visible; } .filmstrip__item { width: 100%; height: auto; aspect-ratio: auto; /* show each photo in full, uncropped */ object-fit: contain; } /* Arrows are desktop-only */ .carousel-nav { display: none !important; } /* Serviços: grid collapses to a single column */ .services__grid { grid-template-columns: 1fr; } .service-card--cta { justify-content: flex-start; } .service-card__cta-label { margin-top: 8px; } /* Contato: label stacks above its value */ .contact-row { grid-template-columns: 1fr; gap: 8px; } /* Bio: meta rail stacks above the copy, freetime runs full width */ .bio__body { grid-template-columns: 1fr; gap: 36px; } .bio__meta { flex-direction: row; flex-wrap: wrap; gap: 22px 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); } .bio__freetime { display: block; } }