/* ========================================================================== INOUYE SUSHI — landing page Paleta: off-white #f5f0e8 · preto #0f0f0f · vermelho #c94a2a Tipografia: Cormorant Garamond (display) · DM Sans (corpo) · Noto Serif JP (kanji) ========================================================================== */ :root { --paper: #f5f0e8; --ink: #0f0f0f; --red: #c94a2a; --red-deep: #b03f22; --paper-60: rgba(245, 240, 232, 0.6); --paper-40: rgba(245, 240, 232, 0.4); --ink-70: rgba(15, 15, 15, 0.7); --ink-55: rgba(15, 15, 15, 0.55); --hairline-dark: rgba(245, 240, 232, 0.16); --hairline-light: rgba(15, 15, 15, 0.14); --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "DM Sans", system-ui, -apple-system, sans-serif; --font-kanji: "Noto Serif JP", serif; --gutter: clamp(1.4rem, 6vw, 5.5rem); --section-pad: clamp(6.5rem, 15vh, 11rem); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; background-color: var(--paper); /* JS conduz a transição entre temas */ color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; } img { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } ::selection { background: var(--red); color: var(--paper); } :focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } .container { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); } /* Sob JS, as seções ficam transparentes e o fundo do "respira" entre temas. Sem JS, cada seção carrega seu fundo sólido — página íntegra de qualquer jeito. */ html.no-js .cta-final, html.no-js .site-footer { background: var(--ink); } html.no-js body { background: var(--paper); } html.no-js .ritual__line-fill { transform: none; } html.no-js .ritual__step .ritual__num { color: var(--red); } html.no-js .ritual__step .ritual__step-title { color: var(--ink); } html.no-js .ritual__step .ritual__dot { background: var(--red); border-color: var(--red); } /* ---------- tipos utilitários ---------- */ .kicker { display: inline-block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.38em; text-transform: uppercase; color: var(--red); margin-bottom: 1.6rem; } .body-text { max-width: 44ch; font-size: 1.02rem; color: var(--ink-70); } .body-text--strong { color: var(--ink); font-weight: 500; } .body-text + .body-text { margin-top: 1.1rem; } .caption { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); margin-top: 0.9rem; } .watermark { position: absolute; font-family: var(--font-kanji); font-weight: 600; line-height: 1; pointer-events: none; user-select: none; z-index: 0; } /* ---------- cursor customizado ---------- */ .cursor-dot, .cursor-ring { display: none; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { html.js body, html.js a, html.js button { cursor: none; } html.js .cursor-dot { display: block; position: fixed; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--red); pointer-events: none; z-index: 1000; } html.js .cursor-ring { display: block; position: fixed; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cursor-ring-color, rgba(15, 15, 15, 0.4)); background: transparent; pointer-events: none; z-index: 999; transition: background-color 0.3s ease, border-color 0.3s ease; } html.js .cursor-ring.is-active { background: rgba(201, 74, 42, 0.14); border-color: var(--red); } body[data-theme="dark"] { --cursor-ring-color: rgba(245, 240, 232, 0.45); } body[data-theme="light"], body[data-theme="shade"] { --cursor-ring-color: rgba(15, 15, 15, 0.4); } } /* ---------- header ---------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.3rem var(--gutter); transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1), color 0.5s ease; color: var(--paper); } body[data-theme="light"] .site-header, body[data-theme="shade"] .site-header { color: var(--ink); } .site-header.is-hidden { transform: translateY(-110%); } .site-header__brand { display: inline-flex; align-items: center; gap: 0.7rem; } .site-header__symbol { width: 30px; height: 30px; } .site-header__wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; } .site-header__cta { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; padding-bottom: 0.25rem; border-bottom: 1px solid var(--red); transition: color 0.3s ease; } .site-header__cta:hover { color: var(--red); } /* ---------- 1. hero ---------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; justify-content: flex-start; overflow: clip; color: var(--paper); } .hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; } /* a rosa de cenoura fica no alto do quadro; o texto ocupa a base, área calma da foto */ .hero__media img { object-fit: cover; object-position: center 42%; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 15, 15, 0.45) 0%, rgba(15, 15, 15, 0.16) 40%, rgba(15, 15, 15, 0.82) 86%, #0f0f0f 100% ), linear-gradient( 100deg, rgba(15, 15, 15, 0.5) 0%, rgba(15, 15, 15, 0.18) 52%, rgba(15, 15, 15, 0.04) 100% ); } .hero__inner { position: relative; z-index: 1; text-align: left; padding-inline: var(--gutter); padding-bottom: clamp(5.5rem, 13vh, 8.5rem); max-width: 46rem; } /* símbolo como assinatura acima da headline, sobre chip off-white: contraste garantido contra qualquer trecho da foto */ .hero__badge { display: grid; place-items: center; width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%; background: rgba(245, 240, 232, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); margin-bottom: 1.8rem; } .hero__symbol { width: 60%; height: auto; } .hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.7rem, 7.4vw, 5.6rem); line-height: 1.04; letter-spacing: 0.01em; } .hero__sub { margin-top: 1.4rem; max-width: 30rem; font-size: clamp(0.95rem, 1.6vw, 1.08rem); color: var(--paper-60); } @media (max-width: 899px) { .hero__media img { object-position: 50% 30%; } } .btn { display: inline-block; margin-top: 3rem; padding: 1.05rem 2.6rem; background: var(--red); color: var(--paper); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; transition: background-color 0.35s ease, letter-spacing 0.35s ease; } .btn:hover { background: var(--red-deep); letter-spacing: 0.34em; } .hero__scrollhint { position: absolute; bottom: 2.4rem; right: var(--gutter); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } .hero__scrollhint-label { font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--paper-40); } .hero__scrollhint-line { width: 1px; height: 52px; background: linear-gradient(var(--paper-60), transparent); overflow: hidden; position: relative; } .hero__scrollhint-line::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: translateY(-100%); animation: scrollhint 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes scrollhint { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(102%); } } /* ---------- 2. manifesto ---------- */ .manifesto { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: clip; color: var(--paper); /* fundo próprio com cauda em gradiente: o texto fica sempre sobre preto sólido e a transição pro off-white acontece "por baixo", sem corte seco */ background: linear-gradient(180deg, #0f0f0f 0%, #0f0f0f 82%, rgba(15, 15, 15, 0) 100%); } .manifesto__inner { position: relative; z-index: 1; max-width: 54rem; padding-inline: var(--gutter); margin-left: clamp(0rem, 6vw, 7rem); /* levemente fora do centro — editorial */ } .manifesto__line { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.65rem, 4.4vw, 3.1rem); line-height: 1.42; } .manifesto__line em { font-style: italic; color: var(--red); } .manifesto__line + .manifesto__line { margin-top: 2.6rem; } .manifesto__line--final { font-weight: 500; } .manifesto__line--final::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--red); margin-right: 0.55em; transform: translateY(-0.08em); } /* sob JS, o ponto vermelho só entra quando o scroll conclui o manifesto */ html.js .manifesto__line--final::before { transform: translateY(-0.08em) scale(0); transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); } html.js .manifesto__line--final.is-on::before { transform: translateY(-0.08em) scale(1); } .watermark--shokunin { top: 50%; right: -6vw; transform: translateY(-50%); font-size: clamp(16rem, 38vw, 34rem); color: rgba(245, 240, 232, 0.04); writing-mode: vertical-rl; } /* ---------- 3. autoridade ---------- */ .autoridade { position: relative; padding-block: var(--section-pad); color: var(--ink); overflow: clip; } .autoridade__grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; } .autoridade__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem, 4.8vw, 3.9rem); line-height: 1.12; max-width: 16em; } .autoridade__title em { font-style: italic; color: var(--red); white-space: nowrap; } .sakura-seal { width: clamp(150px, 22vw, 208px); height: auto; margin-block: 2.6rem 2.2rem; overflow: visible; } .sakura-seal .sakura__petal, .sakura-seal .sakura__center { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; transition: fill 0.9s ease 0.15s; } .sakura-seal.is-drawn .sakura__petal { fill: rgba(201, 74, 42, 0.07); } .timeline { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 3.4rem; } .timeline__stop { flex: 1 1 9rem; min-width: 9rem; border-top: 1px solid var(--hairline-light); padding-top: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; } .timeline__value { font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--ink); } .timeline__value [data-counter] { color: var(--red); font-variant-numeric: tabular-nums; } .timeline__label { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-55); } .autoridade__portrait img { width: 100%; } /* torii-watermark: grande escala, traço fino, atrás do conteúdo */ .watermark-torii { position: absolute; right: 3vw; bottom: 4%; width: clamp(220px, 26vw, 420px); fill: none; stroke: rgba(201, 74, 42, 0.16); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; z-index: 0; } @media (min-width: 900px) { .autoridade__grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: min-content; column-gap: 2.4rem; row-gap: 0; } .autoridade__text { grid-column: 1 / 7; grid-row: 1; padding-top: 2.5rem; } .autoridade__portrait { grid-column: 8 / 13; grid-row: 1 / 3; margin-top: -1.5rem; } } /* ---------- 3b. interlúdio — a jornada ---------- */ .interludio { position: relative; padding-block: clamp(7rem, 16vh, 12rem); text-align: center; color: var(--ink); } html.no-js .interludio { background: #eae2d3; } .interludio__inner { max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); } .interludio__selo { position: relative; width: clamp(96px, 12vw, 124px); aspect-ratio: 1; margin: 0 auto 2.8rem; display: grid; place-items: center; } .interludio__selo svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--red); stroke-width: 1.2; } .interludio__kanji { font-family: var(--font-kanji); font-weight: 600; font-size: clamp(1.7rem, 2.6vw, 2.2rem); } .interludio__line { font-family: var(--font-display); font-size: clamp(1.35rem, 2.7vw, 1.9rem); line-height: 1.55; } .interludio__line + .interludio__line { margin-top: 1.9rem; } .interludio__line em { font-style: italic; color: var(--red); } /* ---------- 4. experiência ---------- */ .experiencia { position: relative; padding-block: var(--section-pad); overflow: clip; color: var(--ink); } .experiencia__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: 1.08; } .experiencia__lead { margin-top: 2.2rem; max-width: 40ch; } .watermark--inoue { top: clamp(5rem, 12vw, 9rem); right: 2vw; font-size: clamp(8rem, 16vw, 14rem); font-weight: 900; color: rgba(201, 74, 42, 0.15); writing-mode: vertical-rl; } .formatos { margin-top: clamp(4rem, 9vw, 6.5rem); position: relative; z-index: 1; } .formato { display: flex; align-items: flex-start; gap: clamp(1.4rem, 3.5vw, 2.6rem); padding-block: 2.5rem; border-top: 1px solid var(--hairline-light); } .formato:last-child { border-bottom: 1px solid var(--hairline-light); } .formato__icon { flex: 0 0 auto; width: clamp(44px, 6vw, 58px); height: auto; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 0.4rem; transition: stroke 0.4s ease; } .formato:hover .formato__icon { stroke: var(--red); } .formato__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.2; } .formato__desc { margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-55); max-width: 38ch; } @media (min-width: 900px) { /* degrau editorial: cada formato desloca um passo à direita */ .formato:nth-child(2) { margin-left: 9%; } .formato:nth-child(3) { margin-left: 18%; } } /* ---------- 4b. mosaico — galeria assimétrica ---------- */ .mosaico { position: relative; padding-block: clamp(4rem, 9vh, 7rem) var(--section-pad); } .mosaico__frase { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3.2vw, 2.3rem); color: var(--ink); margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } .mosaico__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1.2rem, 2.5vw, 2.4rem); } .mosaico__item { margin: 0; } .mosaico__item img { width: 100%; } /* âncora grande + satélites em degraus — editorial, não portfólio */ .mosaico__item--a { grid-column: 1 / 8; grid-row: 1 / 3; } .mosaico__item--b { grid-column: 9 / 13; grid-row: 1; margin-top: clamp(3rem, 8vw, 6rem); } .mosaico__item--c { grid-column: 8 / 11; grid-row: 2; margin-top: clamp(2rem, 5vw, 3.5rem); } .mosaico__item--d { grid-column: 3 / 8; grid-row: 3; margin-top: clamp(2.5rem, 6vw, 4rem); } .mosaico__item--e { grid-column: 9 / 13; grid-row: 3; margin-top: clamp(5rem, 12vw, 9rem); } @media (max-width: 899px) { .mosaico__item--a { grid-column: 1 / 11; grid-row: auto; } .mosaico__item--b { grid-column: 5 / 13; grid-row: auto; margin-top: -14%; } .mosaico__item--c { grid-column: 1 / 8; grid-row: auto; margin-top: 2rem; } .mosaico__item--d { grid-column: 4 / 12; grid-row: auto; margin-top: -10%; } .mosaico__item--e { grid-column: 1 / 9; grid-row: auto; margin-top: 2rem; } } /* ---------- 5. ritual ---------- */ .ritual { position: relative; padding-block: var(--section-pad); color: var(--ink); } .ritual__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } .ritual__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.15; max-width: 14em; } .ritual__steps { position: relative; margin-top: 1.5rem; padding-left: 3.4rem; } .ritual__line { position: absolute; left: 8px; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--hairline-light); } .ritual__line-fill { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(0); /* JS anima conforme o scroll */ } .ritual__step { position: relative; padding-block: clamp(2rem, 4.5vw, 3rem); } .ritual__dot { position: absolute; left: calc(4.5px - 3.4rem); top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(15, 15, 15, 0.35); transform: translateY(-50%) scale(0.8); transition: background-color 0.45s ease, border-color 0.45s ease, transform 0.45s ease; } .ritual__num { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: rgba(15, 15, 15, 0.35); transition: color 0.45s ease; } .ritual__step-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 3.2vw, 2.1rem); line-height: 1.25; color: rgba(15, 15, 15, 0.45); transition: color 0.45s ease; max-width: 18em; } .ritual__step.is-active .ritual__dot { background: var(--red); border-color: var(--red); transform: translateY(-50%) scale(1.15); } .ritual__step.is-active .ritual__num { color: var(--red); } .ritual__step.is-active .ritual__step-title { color: var(--ink); } @media (min-width: 900px) { .ritual__grid { grid-template-columns: repeat(12, 1fr); column-gap: 2.4rem; } .ritual__intro { grid-column: 1 / 8; grid-row: 1; } .ritual__steps { grid-column: 1 / 9; grid-row: 2; } } /* ---------- 6. prova social ---------- */ .prova { position: relative; min-height: 96vh; min-height: 96svh; display: flex; align-items: flex-end; overflow: clip; color: var(--paper); } .prova__media { position: absolute; inset: -8% 0; } .prova__media img { width: 100%; height: 100%; object-fit: cover; } .prova__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 15, 15, 0.62) 0%, rgba(15, 15, 15, 0.18) 45%, rgba(15, 15, 15, 0.66) 100% ); } .prova__caption { position: relative; z-index: 1; margin: 0 var(--gutter) 3.6rem; font-size: 0.74rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--paper); } .prova__caption::before { content: ""; display: inline-block; width: 2.6rem; height: 1px; background: var(--red); margin-right: 1rem; vertical-align: middle; } .prova__quote { position: relative; z-index: 1; margin: 0 var(--gutter) 4rem; max-width: 34rem; } .prova__quote blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-style: italic; line-height: 1.4; } .prova__quote .caption { color: var(--paper-60); } /* ---------- 7. CTA final ---------- */ .cta-final { position: relative; padding-block: clamp(8rem, 18vh, 13rem); text-align: center; color: var(--paper); overflow: clip; } .cta-final__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 7vw, 5.4rem); line-height: 1.08; } .cta-final__when { margin-top: 1rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--paper-60); } .cta-circle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: clamp(190px, 30vw, 250px); aspect-ratio: 1; margin-top: clamp(3rem, 7vh, 4.5rem); border: 1px solid var(--red); border-radius: 50%; transition: background-color 0.5s ease, transform 0.5s cubic-bezier(0.33, 1, 0.68, 1); } .cta-circle:hover { background: var(--red); transform: scale(1.04); } .cta-circle__ring { position: absolute; inset: -11px; border: 1px dashed rgba(201, 74, 42, 0.45); border-radius: 50%; animation: ring-spin 46s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } .cta-circle__label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.9; } /* ---------- 8. footer ---------- */ .site-footer { padding: 5rem 0 4rem; text-align: center; color: var(--paper); } .site-footer__kanji { font-family: var(--font-kanji); font-weight: 600; font-size: 2.1rem; opacity: 0.92; } /* ---------- decorativos: line art japonesa, textura de fundo ---------- */ svg.deco { position: absolute; z-index: 0; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .deco--onda { left: var(--gutter); bottom: 3.5%; width: 96px; color: rgba(15, 15, 15, 0.22); } .deco--fuji { right: var(--gutter); bottom: 5%; width: 118px; color: rgba(15, 15, 15, 0.2); } .deco--sol { right: -70px; top: 9%; width: clamp(200px, 24vw, 320px); color: rgba(201, 74, 42, 0.2); stroke-width: 0.8; } @media (max-width: 899px) { svg.deco { display: none; } } /* ---------- movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { .hero__scrollhint-line::after { animation: none; } .cta-circle__ring { animation: none; } .site-header { transition: none; } }